Material Bottom Sheet

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-webeetle

Usage

import { BottomSheet } from 'material-ui-bottom-sheet-webeetle'
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.