Action Sheet

In Desktop settings, Action Sheets are represented by Popupmenus. However, Action Sheet components can be configured to instead display a mobile-friendly view of this menu, which appears to roll out from the bottom of the viewport, and can easily be selected by touch.

Code Example

The Action Sheet HTML markup is generated by the component, after the component is invoked against its trigger button. Actions are defined in Javascript as a simple array of objects.

<button id="action-sheet-trigger" class="btn-icon">
  <span class="audible">Trigger Action Sheet</span>
  <svg role="presentation" aria-hidden="true" focusable="false" class="icon">
    <use href="#icon-more"></use>
  </svg>
</button>

Each action is defined by its "icon" and "text" properties:

$('#action-sheet-trigger').actionsheet({
  actions: [
    { icon: 'mail', text: 'Email' },
    { icon: 'user-profile', text: 'Go to Profile' },
    { icon: 'workflow', text: 'Share' },
    { icon: 'user-status-do-not-disturb', text: 'Remove' }
  ]
});

Responding to Actions

The action sheet accepts a callback for the following situations:

• When a selection occurs, via an onSelect callback.
• When the Action Sheet is cancelled, via an onCancel callback.

These callbacks can be defined via the settings. The callbacks can contain corresponding UI elements that triggred the action/cancel:

$('#action-sheet-trigger').actionsheet({
  actions: [ /* ... */ ],
  onSelect: ($a) => {
    console.info(`UI that was selected: ${$a.text().trim()}`);
  },
  onCancel: ($a) => {
    console.info(`UI that was responsible for cancelling: ${$a.text().trim()}`);
  }
});

Changing Breakpoints

The breakpoint in which the Mobile view is displayed can be configured using two settings:

• [displayAsActionSheet] – Determines the component's ability to show the Action Sheet. By default, the action sheet will be displayed when the screen is smaller than a specified breakpoint. This can be configured to "always" show the Popupmenu (false), or to "always" show the Action Sheet (always) no matter what the breakpoint.
• [breakpoint] – Maps to an IDS Breakpoint, which will determine the viewport size in which Action Sheets will be displayed instead of Popupmenus.

// Defaualt Behavior
$('#action-sheet-trigger').actionsheet({
  actions: [ /* ... */ ],
  displayAsActionSheet: 'responsive'
  breakpoint: 'phone-to-tablet' // change this to a corresponding breakpoint
});

// Always shows Popup
$('#action-sheet-trigger').actionsheet({
  actions: [ /* ... */ ],
  displayAsActionSheet: false
});

// Always shows Action Sheet
$('#action-sheet-trigger').actionsheet({
  actions: [ /* ... */ ],
  displayAsActionSheet: 'always'
});

Cancel Button

By default, the Action Sheet displays a "cancel" button that will specifically cause the sheet to close in "cancel" mode. A separate callback function/event is fired in this case. It's possible to disable the cancel button to prevent this behavior:

$('#action-sheet-trigger').actionsheet({
  actions: [ /* ... */ ],
  showCancelButton: false
});

Behavior Guidelines

For easier usability, Action Sheets should not contain too many different actions. Actions should be contextual to the element that triggered them, similar to a simple Context Menu.

Responsive Guidelines

• While it's possible to configure the breakpoint at which the Action Sheet is displayed, keep in mind that the view is intended to be mobile-friendly, and should be used with regard for an easy experience for the end user.

Keyboard Shortcuts

• Spacebar Executes an action, and closes an open Popupmenu or Action Sheet.
• Escape "Cancels" an open Popupmenu or Action Sheet.

Upgrading from 3.X

No corresponding component to the Action Sheet was available in the 3.x components.