Nap Power: Maximum

    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.

    Install

    npm i material-ui-bottom-sheet

    DownloadsWeekly Downloads

    455

    Version

    0.5.1

    License

    MIT

    Last publish

    Collaborators

    • evidence
    • lemaik
    • redbeard0091
    • saschb2b