A container for secondary content/controls to be displayed on user request. Consider this component as displayed in context to the triggering control with the dialog overlaying the page content.
An inline dialog should be preferred over a modal dialog when a connection between the action has a clear benefit versus having a lower user focus.
| API status: | general |
|---|---|
| Included in AUI core? | Not in core You must explicitly require the web resource key. |
| Web resource key: |
com.atlassian.auiplugin:aui-inline-dialog2
|
| AMD Module key: |
require('aui/inline-dialog')
|
| Experimental API: | 5.7 |
| General API: | 5.9 |
| Web Component API: | 5.9 |
An inline dialog can be opened by a Trigger element.
Any interactive element can be made in to a trigger — the typical elements to use
are either button or a
Associate a trigger (data-aui-trigger) to an
inline dialog by setting the trigger element's aria-controls
attribute to the id of the inline dialog:
An inline dialog will, by default, open when a user clicks its trigger, but can be made to open:
To programmatically open an inline dialog, set its
open property or add the open
boolean attribute:
To make an inline dialog open at page load, simply specify the
open boolean attribute:
Make an inline dialog show when hovering over the trigger by setting
the inline dialog's responds-to attribute:
Or by setting the respondsTo JavaScript
property:
Inline dialogs will automatically close when the user clicks outside the inline dialog or presses ESC. Inline dialogs that open on hover close when the user stops hovering over either the trigger or the inline dialog itself.
An inline dialog that is set to not automatically close can only be closed programmatically, e.g., via an event handler bound to a close button.
To programmatically close an inline dialog, set its open
property or remove its open attribute:
Inline dialogs can be forced to remain open via the
persistent boolean attribute:
Or by setting the persistent JavaScript property:
An inline dialog can be aligned, relative to its trigger, along twelve different points, via the
alignment attribute:
The alignment attribute takes two positional arguments in the
format alignment="edge edge-position", where
edge specifies what edge to align the inline
dialog's arrow to, and
edge-position specifies where on that edge the
arrow should appear.
See the alignment API
reference for all valid combinations, or test the combinations below:
If there is not enough room to display an inline dialog with the desired alignment the inline dialog will flip alignment.
| Name | Attribute | Property | Type | Description |
|---|---|---|---|---|
id |
String |
Required when using a trigger to interact with an inline dialog but not required for the inline dialog to function. Defaults to |
||
alignment |
String |
Specifies an inline dialog's alignment with respect to its trigger. The inline dialog is not positioned if this is not specified. Defaults to |
||
open |
Boolean |
When set it either hides or shows the element based on whether the incoming value is falsy or truthy. When accessed it will return whether or not the inline dialog is open. Defaults to |
||
persistent |
Boolean |
Specifies that an inline dialog is persistent. Persistent inline dialogs cannot be closed by outside click or escape. Defaults to |
||
responds-to |
String |
Determines the type of interaction a trigger will have with its inline dialog. Values:
|
There are no methods.
Events are triggered when inline dialogs are shown and hidden. These events are triggered natively on the component. You can bind to the the inline dialog element for instance specific events, or rely on event bubbling and bind to the document to receive events for every show and hide.
| Event | Description | Preventable | Bubbles |
|---|---|---|---|
| aui-show | Triggered before an inline dialog instance is shown. | Yes. Prevents it from showing. | Yes |
| aui-hide | Triggered before an inline dialog instance is hidden. | Yes. Prevents it from hiding. | Yes |