material-components_material-components-ios/components/BottomSheet

Sheets: bottom

Bottom sheets slide up from the bottom of the screen to reveal more content. Bottom sheets integrate with the app to display supporting content or present deep-linked content from other apps.

Design & API Documentation

• Material Design guidelines: Bottom sheet

---

Installation

Installation with CocoaPods

To add this component to your Xcode project using CocoaPods, add the following to your Podfile:

pod 'MaterialComponents/BottomSheet'

Then, run the following command:

pod install

---

Usage

Importing

Before using Bottom Sheet, you'll need to import it:

Swift

import MaterialComponents.MaterialBottomSheet

Objective-C

#import "MaterialBottomSheet.h"

Examples

Create a view controller that the bottom sheet will hold and initialize the bottom sheet with that view controller. After the bottom sheet is created, it is ready to be presented on the current view controller.

Swift

// View controller the bottom sheet will hold
let viewController: ViewController = ViewController()
// Initialize the bottom sheet with the view controller just created
let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: viewController)
// Present the bottom sheet
present(bottomSheet, animated: true, completion: nil)

Objective-C

// View controller the bottom sheet will hold
ViewController *viewController = [[ViewController alloc] init];
// Initialize the bottom sheet with the view controller just created
MDCBottomSheetController *bottomSheet = [[MDCBottomSheetController alloc] initWithContentViewController:viewController];
// Present the bottom sheet
[self presentViewController:bottomSheet animated:true completion:nil];

Create a button that will call the code above.

Swift

let button = UIButton(frame: .zero)
button.addTarget(self, action: #selector(presentBottomSheet), for: .touchUpInside)

Objective-C

_button = [[UIButton alloc] initWithFrame:CGRectZero];
[_button addTarget:self action:@selector(presentBottomSheet) forControlEvents:UIControlEventTouchUpInside];

Extensions

Shape Theming

You can theme a bottom sheet with your app's shape scheme using the ShapeThemer extension.

You must first add the ShapeThemer extension to your project:

pod 'MaterialComponents/BottomSheet+ShapeThemer'

Swift

// Step 1: Import the ShapeThemer extension
import MaterialComponents.MaterialBottomSheet_ShapeThemer

// Step 2: Create or get a shape scheme
let shapeScheme = MDCShapeScheme()

// Step 3: Apply the shape scheme to your component
MDCBottomSheetControllerShapeThemer.applyShapeScheme(shapeScheme, to: component)

Objective-C

// Step 1: Import the ShapeThemer extension
#import "MaterialBottomSheet+ShapeThemer.h"

// Step 2: Create or get a shape scheme
id<MDCShapeScheming> shapeScheme = [[MDCShapeScheme alloc] init];

// Step 3: Apply the shape scheme to your component
[MDCBottomSheetControllerShapeThemer applyShapeScheme:shapeScheme
     toBottomSheetController:component];