AUI Documentation

Inline dialog

Ask a question Design guidelines
This documentation is for the web component inline dialog API.

Summary

The inline dialog is a wrapper 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.

A 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.

Status

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: N/A
Experimental since: 5.7
General API status: 5.9

Examples

Code

The HTML component is simply a trigger with an ID, which can be used by Inline Dialog's JavaScript.

<a data-aui-trigger href="#" aria-controls="inline-dialog-wc-1">Inline dialog trigger</a>
<aui-inline-dialog id="inline-dialog-wc-1" alignment="bottom center">
    Inline dialog content example.
</aui-inline-dialog>

Attributes and properties

Name Attribute Property Type Description
id is an attribute is a property String

Required when using a Trigger to interact with the Inline Dialog but not required for the Inline Dialog to function.

Defaults to null.
alignment is an attribute is not a property String

Specifies the inline dialog's alignment with respect to its trigger. The inline dialog is not positioned if this is not specified.

Defaults to "right middle".

Show all values

open is an attribute is a property 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 true.
persistent is an attribute is a property Boolean

Specifies that the inline dialog is persistent. Persistent inline dialogs cannot be closed by outside click or escape.

Defaults to false.
responds-to is an attribute is a property String

Determines the type of interaction a trigger will have with the inline dialog.

Values:

  • toggle default - will respond to click event on the trigger.
  • hover - will respond to mouseover, mouseout, focus, blur events on the trigger.

Methods

There are no methods.

Events

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 dialog2 component 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