Action Sheet

Open bugs badge

Material design action sheets should be used as an overflow menu. An Action Sheet comes up from the bottom of the screen and displays actions a user can take.

An animation showing a Material Design Action Sheet.
An animation showing a Material Design Action Sheet.

Design & API documentation

Table of contents


Overview

MDCActionSheetController is a material design implementation of UIAlertControllerStyleActionSheet.

Installation

Installation with CocoaPods

Add the following to your Podfile:

Then, run the following command:

Importing

To import the component:

Swift

Objective-C

Usage

Typical use

Create an instance of MDCActionSheetController and add actions to it. You can now present the action sheet controller.

Swift

Objective-C

MDCActionSheetController vs. UIAlertControllerStyleActionSheet

MDCActionSheetController is intended to mirror a UIAlertController with the UIAlertControllerStyleActionSheet style.

Similarities

  1. Both classes are presented from the bottom of the screen on an iPhone and have a list of actions.

  2. Both classes support optional title and message properties.

Differences

  1. UIAlertControllerActionSheetStyle requires that you set the popoverPresentationController on larger devices, MDCActionSheetController doesn't support popoverPresentationController but instead always comes up from the bottom of the screen.

  2. UIAlertControllerStyleActionSheet is a style of UIAlertController and not its own class. If you need a Material UIAlertController please see the MDCAlertController class.

  3. MDCActionSheetController does not support text fields.

  4. MDCActionSheetController does not have a preferredAction.

Customization

Positioning Action Sheet Actions

The layout of the Action Sheet list items can be adjusted with the contentEdgeInsets API. Positive values will inset the content and negative values will outset the conent. The insets apply to all action items.

Action Sheet showing three items with default edge content insets.

Action Sheet showing three items with default content insets.

For example, setting top and bottom insets (positive values) will reduce the height of the Action list items.

Action Sheet showing three items with top and bottom content edge insets.

Action Sheet showing three items with top and bottom content edge insets.

Setting a left outset (negative value) and right inset (positive value) will shift the Action's content to the trailing edge.

Action Sheet showing three items with a left content edge outset and right inset shifting content to the right.

Action Sheet showing three items with a left content edge outset and right inset shifting content to the right.

Extensions

Theming

You can theme an MDCActionSheet to match the Material Design style by using a theming extension. The content below assumes you have read the article on Theming.

First, create an action sheet and import the theming extension header for Action Sheets.

Swift

Objective-C

You can then provide a container scheme instance to any of the MDCActionSheet theming extensions.

Then, you can theme your action sheet.

Swift

Objective-C

Accessibility

To help ensure your Action Sheet is accessible to as many users as possible, please be sure to reivew the following recommendations:

The scrim by default enables the "Z" gesture to dismiss. If isScrimAccessibilityElement is not set or is set to false then scrimAccessibilityLabel, scrimAccessibilityHint, and scrimAccessibilityTraits will have any effect.

Set -isScrimAccessibilityElement

Swift

Objective-C

Set -scrimAccessibilityLabel

Swift

Objective-C

Set -scrimAccessibilityHint

Swift

Objective-C

Set -scrimAccessibilityTraits

Swift

Objective-C