Package Exports

@atlaskit/inline-dialog

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@atlaskit/inline-dialog) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Inline Dialog

The Inline Dialog is a container for secondary content and controls that are displayed on user request.

Example inline dialog

Try it out

Interact with a live demo of the @atlaskit/inline-dialog component.

Installation

npm install @atlaskit/inline-dialog

Using the component

@atlaskit/inline-dialog is a React component that can wrap content and then toggle the display of an aligned dialog box.

Example usage:

import React, { PropTypes, PureComponent } from 'react';
import AKInlineDialog from '@atlaskit/inline-dialog';

class ButtonActivatedDialog extends PureComponent {
  static propTypes = {
    content: PropTypes.node,
    position: PropTypes.string,
  }

  state = {
    isOpen: false,
  };

  handleClick = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  handleOnClose = ({ isOpen }) => {
    this.setState({ isOpen });
  }

  render() {
    return (
      <AKInlineDialog
        content={this.props.content}
        position={this.props.position}
        isOpen={this.state.isOpen}
        onClose={this.handleOnClose}
      >
        <AKButton
          onClick={this.handleClick}
          iconBefore={<BitbucketAdminIcon />}
          isSelected
        />
      </AKInlineDialog>
    );
  }
}

This would allow you to use the ButtonActivatedDialog class to render something similar to the example gif above.

Support and feedback

We're here to help!

Let us know what you think of our components and docs, your feedback is really important for us.

Community support

Ask a question in our forum.

Check if someone has already asked the same question before.

Create a support ticket

Are you in trouble? Let us know!