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

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];

Behavioral Customizations

You can also choose to have your bottom sheet not be dismissable when dragged downwards by using the dismissOnDraggingDownSheet property on MDCBottomSheetController.

Swift

let viewController: ViewController = ViewController()
let bottomSheet: MDCBottomSheetController = MDCBottomSheetController(contentViewController: viewController)

bottomSheet.dismissOnDraggingDownSheet = false

present(bottomSheet, animated: true, completion: nil)

Objective-C

ViewController *viewController = [[ViewController alloc] init];
MDCBottomSheetController *bottomSheet = [[MDCBottomSheetController alloc] initWithContentViewController:viewController];

bottomSheet.dismissOnDraggingDownSheet = NO;

[self presentViewController:bottomSheet animated:true completion:nil];