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
npm i --save react-custom-scrollbars material-ui-bottom-sheet-webeetle
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>
)
}
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
The files included in this repository are licensed under the MIT license.