Material-ui-bottom-sheet-webeetle NPM

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.

react material bottom sheet react-component

@material-ui/codemod prop-types

@everything-registry/sub-chunk-2138 @zalastax/nolb-material-

0.5.3

7 years ago

0.5.2

7 years ago