Modal Bottom Sheet
The Bottom Sheet Plugin should be used when multiple actions are needed for a single cell style. This could include Download, favorite & Share. The Bottom Sheet Plugin allows for these actions to be displayed when actioned via the ‘Open Modal Bottom Sheet Cell Action’ plugin.
- Overlay
- Optional Handle
- Toast Menu Padding Top (14px)
- Optional Close Button
- Title Label
- Summary Label
- Action button icon (44x44px)
- Toast item label
- Toast Menu Padding Bottom (8px)
Adding the Bottom Sheet plugin & Open Modal Bottom Sheet Cell Action to an app
The ‘Modal Bottom Sheet Action’ plugin is used to trigger & configure the bottom sheet from a cell. This should be added via the plugin gallery.
Actioning a download from the Bottom Sheet plugin
Action plugins have different states which can be amended via the flavors section in the action plugin itself. Please note that the action labels (such as ‘Download’ or ‘Favorited’) can be changed via the localizations section.
Customizing assets/styles of bottom sheet plugin
There are a number of configuration options available with the bottom sheet. However, they are spread across different plugins.
- Action icons/labels are configured through the action plugins. This refers to Download, Favorite & Share
- Base bottom sheet styles are configured in the Theme plugin. This includes: Overlay color, Bottom Sheet background color, Top Corner Radius, Handle Configuration, Max Height & Tablet Max Width
- The rest of the configuration takes place in the Bottom Sheet plugin and contains the configuration options for menu ordering, spacing, title & subtitle styling and menu item styling.
Adding/Reordering action on the Bottom Sheet
Actions that appear in the bottom sheet can be managed via the ‘Open Modal Bottom Sheet Cell Action’ plugin. In the screenshot below the list of actions are displayed in the ‘Modal Bottom Sheet Actions’ field. These should be comma separated. The order that the actions appear in the bottom sheet can be amended here by rearranging this comma separated list.
- Download: offline-content-button
- favorite: local_storage_favorites_action
- Share: native_share_action