mndrke/material-ui-bottom-sheet

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

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.