https://github.com/TeamWertarbyte/material-ui-fullscreen-dialog

A fullscreen dialog for Material-UI.
https://github.com/TeamWertarbyte/material-ui-fullscreen-dialog

Last synced: 25 days ago
JSON representation

A fullscreen dialog for Material-UI.

• Host: GitHub
• URL: https://github.com/TeamWertarbyte/material-ui-fullscreen-dialog
• Owner: TeamWertarbyte
• License: mit
• Created: 2017-01-12T10:22:53.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:35:18.000Z (almost 2 years ago)
• Last Synced: 2024-05-01T13:02:05.048Z (8 months ago)
• Language: JavaScript
• Homepage: https://mui.wertarbyte.com/#material-ui-fullscreen-dialog
• Size: 2.83 MB
• Stars: 58
• Watchers: 2
• Forks: 10
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-ui - Fullscreen Dialog - A fullscreen dialog for Material-UI. (Components)

README

        
# material-ui-fullscreen-dialog

This project provides a [fullscreen dialog][dialogspec] for [Material-UI][mui].

![Demo](demo.gif)

If you want to try the component yourself instead of watching a gif, head over to [the storybook][gh-pages] for a live demo!

## Installation

```shell

npm i --save material-ui-fullscreen-dialog

```

## Usage

```jsx

import FullscreenDialog from 'material-ui-fullscreen-dialog'

 this.setState({ open: false })}

  title={'Demo dialog'}

  actionButton={ this.setState({ open: false })}

  />}

>

  // dialog content here

```

## Properties

| Name | Type | Default | Description |

| --- | --- | --- | --- |

| actionButton | `node` | | A `FlatButton` or `IconButton` that is used as affirmative action button. |

| appBarClassName | `string` | | Set the CSS classes of the app bar. | 

| appBarStyle | `object` | | Overrides the inline-styles of the app bar. | 

| appBarZDepth | `number` | 1 | Overrides the z-depth of the app bar, will affect its shadow. This is ignored if immersive is set to `true`. |

| children | `node` | | Children elements. |

| closeIcon | `node` | Close icon | Icon element used for the dismissive action. This is hidden if `onRequestClose` is not set. |

| containerClassName | `string` | | Set the CSS classes of the dialog's children container. |

| containerStyle | `object` | | Overrides the inline-styles of the dialog's children container. |

| immersive | `bool` | `false` | Toggles the immersive mode. If set to `true`, the app bar has a semi-transparent gradient and overlays the content. |

| onRequestClose | `function` | | Callback that is invoked when the dismissive action button is touched. |

| open * | `bool` | | Controls whether the dialog is opened or not. |

| style | `object` | | Overrides the inline-styles of the dialog's root element. |

| title | `string` | | The title of the dialog. |

| titleStyle | `object` | | Overrides the inline-styles of the app bar's title element. |

\* required property

## Credits

The code for the animation was adapted from Material UI's [Dialog][mui-dialog], although the animation itself is different.

## License

The files included in this repository are licensed under the MIT license.

[dialogspec]: https://material.io/guidelines/components/dialogs.html#dialogs-specs

[mui]: http://www.material-ui.com/#/

[gh-pages]: https://teamwertarbyte.github.io/material-ui-fullscreen-dialog/

[mui-dialog]: https://github.com/callemall/material-ui/blob/master/src/Dialog/Dialog.js