material-ui-bottom-sheet

0.5.1 • Public • Published

Material Bottom Sheet

Build Status Greenkeeper badge

Bottom sheets slide up from the bottom of the screen to reveal more content. See the material specs

There are two variants:

  • Modal bottom sheets
  • Persistent bottom sheets

For now we'll focus on the modal variant.

See this component in action

Installation

npm i --save react-custom-scrollbars material-ui-bottom-sheet

Usage

import { BottomSheet } from 'material-ui-bottom-sheet'
import { List, ListItem, Subheader } from 'material-ui'
 
// ...
render() {
  return(
    <div>
        <BottomSheet
            onRequestClose={() => console.log('close')}
            open
        >
            <Subheader>Open in</Subheader>
            <List>
                <ListItem primaryText="Google Plus" />
                <ListItem primaryText="Facebook" />
                <ListItem primaryText="Inbox" />
                <ListItem primaryText="TextEditor" />
            </List>
        </BottomSheet>
    </div>
  )
}

Material Bottom Sheet Properties

Name Type Default Description
action node Adds an action element at the top right corner.
actionStyle object Override the inline-styles of the action element.
bodyStyle object Override the inline-styles of the body container.
contentStyle object Override the inline-styles of the content container.
onRequestClose* function noop Fired when the gray background of the popup is pressed when it is open.
open bool false Controls whether the bottom sheet is opened or not.
style object Override the inline-styles of the root element.

* required property

License

The files included in this repository are licensed under the MIT license.

Package Sidebar

Install

npm i material-ui-bottom-sheet

Weekly Downloads

134

Version

0.5.1

License

MIT

Last publish

Collaborators

  • evidence
  • lemaik
  • redbeard0091
  • saschb2b