https://github.com/teamwertarbyte/material-ui-bottom-sheet
Bottom sheets slide up from the bottom of the screen to reveal more content.
https://github.com/teamwertarbyte/material-ui-bottom-sheet
Last synced: about 1 year ago
JSON representation
Bottom sheets slide up from the bottom of the screen to reveal more content.
- Host: GitHub
- URL: https://github.com/teamwertarbyte/material-ui-bottom-sheet
- Owner: TeamWertarbyte
- License: mit
- Created: 2017-01-15T18:11:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-07-14T06:00:52.000Z (almost 8 years ago)
- Last Synced: 2025-04-11T16:56:44.494Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://mui.wertarbyte.com/#material-ui-bottom-sheet
- Size: 947 KB
- Stars: 29
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Material Bottom Sheet
[](https://travis-ci.org/TeamWertarbyte/material-ui-bottom-sheet)
[](https://greenkeeper.io/)
Bottom sheets slide up from the bottom of the screen to reveal more content. See the [material specs](https://material.io/guidelines/components/bottom-sheets.html#)
There are two variants:
* Modal bottom sheets
* Persistent bottom sheets
For now we'll focus on the modal variant.
See this component in [action](https://teamwertarbyte.github.io/material-ui-bottom-sheet/)
## Installation
```shell
npm i --save react-custom-scrollbars material-ui-bottom-sheet
```
## Usage
```js
import { BottomSheet } from 'material-ui-bottom-sheet'
import { List, ListItem, Subheader } from 'material-ui'
// ...
render() {
return(
console.log('close')}
open
>
Open in
)
}
```
### 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.