material-ui-bottom-sheet

Material style bottom sheet

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
material-ui-bottom-sheet
0.5.15 years ago6 years agoMinified + gzip package size for material-ui-bottom-sheet in KB

Readme

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.