Action Sheet
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.
Design & API documentation
- Class: MDCActionSheetAction
- Class: MDCActionSheetController
- Protocol: MDCActionSheetControllerDelegate
Table of contents
Overview Installation Usage MDCActionSheetController vs. UIAlertControllerStyleActionSheet Customization Extensions Accessibility
Overview
MDCActionSheetController is a material design implementation of UIAlertControllerStyleActionSheet.
Installation
Installation with CocoaPods
Add the following to your Podfile:
pod 'MaterialComponents/ActionSheet'
Then, run the following command:
xxxxxxxxxx
pod install
Importing
To import the component:
Swift
xxxxxxxxxx
import MaterialComponents.MaterialActionSheet
Objective-C
xxxxxxxxxx
Usage
Typical use
Create an instance of MDCActionSheetController and add actions to it. You can now present the action sheet controller.
Swift
let actionSheet = MDCActionSheetController(title: "Action Sheet",
message: "Secondary line text")
let actionOne = MDCActionSheetAction(title: "Home",
image: UIImage(named: "Home"),
handler: { print("Home action" })
let actionTwo = MDCActionSheetAction(title: "Email",
image: UIImage(named: "Email"),
handler: { print("Email action" })
actionSheet.addAction(actionOne)
actionSheet.addAction(actionTwo)
present(actionSheet, animated: true, completion: nil)
Objective-C
xxxxxxxxxx
MDCActionSheetController vs. UIAlertControllerStyleActionSheet
MDCActionSheetController is intended to mirror a
Similarities
Both classes are presented from the bottom of the screen on an iPhone and have a list of actions.
Both classes support optional title and message properties.
Differences
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.
UIAlertControllerStyleActionSheet is a style of UIAlertController and not its own class. If you need a Material UIAlertController please see the MDCAlertController class.
MDCActionSheetController does not support text fields.
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 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.
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.
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
First, create an action sheet and import the theming extension header for Action Sheets.
Swift
xxxxxxxxxx
import MaterialComponents.MaterialActionSheet
import MaterialComponents.MaterialActionSheet_Theming
let actionSheet = MDCActionSheetController()
Objective-C
xxxxxxxxxx
You can then provide a container scheme instance to any of the MDCActionSheet theming extensions.
Then, you can theme your action sheet.
Swift
xxxxxxxxxx
actionSheet.applyTheme(withScheme: containerScheme)
Objective-C
xxxxxxxxxx
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
xxxxxxxxxx
let actionSheet = MDCActionSheetController()
actionSheet.transitionController.isScrimAccessibilityElement = true
Objective-C
xxxxxxxxxx
Set -scrimAccessibilityLabel
Swift
xxxxxxxxxx
let actionSheet = MDCActionSheetController()
actionSheet.transitionController.scrimAccessibilityLabel = "Cancel"
Objective-C
xxxxxxxxxx
Set -scrimAccessibilityHint
Swift
xxxxxxxxxx
let actionSheet = MDCActionSheetController()
actionSheet.transitionController.scrimAccessibilityHint = "Dismiss the action sheet"
Objective-C
xxxxxxxxxx
Set -scrimAccessibilityTraits
Swift
xxxxxxxxxx
let actionSheet = MDCActionSheetController()
actionSheet.transitionController.scrimAccessibilityTraits = UIAccessibilityTraitButton
Objective-C
xxxxxxxxxx