add fullscreen dialog.
A first version of fullscreen dialogs as defined in the material spec https://material.google.com/components/dialogs.html#dialogs-full-screen-dialogsold
parent
abf91d3d24
commit
179323ccda
|
@ -54,7 +54,10 @@ If you want to provide a theme via context, the component key is `RTDialog`.
|
||||||
| `onOverlayMouseMove` | `Function` | | Callback called when the mouse is moving over the overlay. |
|
| `onOverlayMouseMove` | `Function` | | Callback called when the mouse is moving over the overlay. |
|
||||||
| `onOverlayMouseUp` | `Function` | | Callback called when the mouse button is released over the overlay. |
|
| `onOverlayMouseUp` | `Function` | | Callback called when the mouse button is released over the overlay. |
|
||||||
| `title` | `String` | | The text string to use as standar title of the dialog.|
|
| `title` | `String` | | The text string to use as standar title of the dialog.|
|
||||||
| `type` | `String` | `normal` | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |
|
| `type` | `String` | `normal` | Used to determine the size of the dialog. It can be `small`, `normal`, `large` or `fullscreen`. |
|
||||||
|
|
||||||
|
Notice that the `fullscreen` option only applies on mobile devices with small screens (i.e. cellphones), and on other devices it behaves as a `large` dialog.
|
||||||
|
|
||||||
|
|
||||||
## Theme
|
## Theme
|
||||||
|
|
||||||
|
|
|
@ -47,6 +47,18 @@
|
||||||
width: 96vw;
|
width: 96vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fullscreen {
|
||||||
|
width: 96vw;
|
||||||
|
|
||||||
|
@media screen and (max-width: $layout-breakpoint-xs) {
|
||||||
|
max-width: 100vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
@include typo-title();
|
@include typo-title();
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
|
|
|
@ -1,10 +1,19 @@
|
||||||
import React, { PropTypes } from 'react';
|
import React, { PropTypes } from 'react';
|
||||||
import Button from '../../components/button';
|
import Button from '../../components/button';
|
||||||
import Dialog from '../../components/dialog';
|
import Dialog from '../../components/dialog';
|
||||||
|
import Dropdown from '../../components/dropdown';
|
||||||
|
|
||||||
|
const dialogTypes = [
|
||||||
|
{value: 'small', label: 'small'},
|
||||||
|
{value: 'normal', label: 'normal'},
|
||||||
|
{value: 'large', label: 'large'},
|
||||||
|
{value: 'fullscreen', label: 'fullscreen'}
|
||||||
|
];
|
||||||
|
|
||||||
class DialogTest extends React.Component {
|
class DialogTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
active: false
|
active: false,
|
||||||
|
type: 'normal'
|
||||||
};
|
};
|
||||||
|
|
||||||
handleToggle = () => {
|
handleToggle = () => {
|
||||||
|
@ -13,6 +22,10 @@ class DialogTest extends React.Component {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
changeDialogType = (value) => {
|
||||||
|
this.setState({type: value});
|
||||||
|
};
|
||||||
|
|
||||||
actions = [
|
actions = [
|
||||||
{ label: 'Disagree', primary: true, onClick: this.handleToggle },
|
{ label: 'Disagree', primary: true, onClick: this.handleToggle },
|
||||||
{ label: 'Agree', primary: true, onClick: this.handleToggle }
|
{ label: 'Agree', primary: true, onClick: this.handleToggle }
|
||||||
|
@ -23,11 +36,19 @@ class DialogTest extends React.Component {
|
||||||
<section>
|
<section>
|
||||||
<h5>Dialog</h5>
|
<h5>Dialog</h5>
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
|
<Dropdown
|
||||||
|
label='Dialog Type'
|
||||||
|
auto
|
||||||
|
onChange={this.changeDialogType}
|
||||||
|
source={dialogTypes}
|
||||||
|
value={this.state.type}
|
||||||
|
/>
|
||||||
<Button label='Show Dialog' raised primary onClick={this.handleToggle} />
|
<Button label='Show Dialog' raised primary onClick={this.handleToggle} />
|
||||||
<ContextComponent>
|
<ContextComponent>
|
||||||
<Dialog
|
<Dialog
|
||||||
actions={this.actions}
|
actions={this.actions}
|
||||||
active={this.state.active}
|
active={this.state.active}
|
||||||
|
type={this.state.type}
|
||||||
title="Use Google's location service?"
|
title="Use Google's location service?"
|
||||||
onOverlayClick={this.handleToggle}
|
onOverlayClick={this.handleToggle}
|
||||||
onEscKeyDown={this.handleToggle}
|
onEscKeyDown={this.handleToggle}
|
||||||
|
|
Loading…
Reference in New Issue