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. |
|
||||
| `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.|
|
||||
| `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
|
||||
|
||||
|
|
|
@ -47,6 +47,18 @@
|
|||
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 {
|
||||
@include typo-title();
|
||||
flex-grow: 0;
|
||||
|
|
|
@ -1,10 +1,19 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
import Button from '../../components/button';
|
||||
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 {
|
||||
state = {
|
||||
active: false
|
||||
active: false,
|
||||
type: 'normal'
|
||||
};
|
||||
|
||||
handleToggle = () => {
|
||||
|
@ -13,6 +22,10 @@ class DialogTest extends React.Component {
|
|||
});
|
||||
};
|
||||
|
||||
changeDialogType = (value) => {
|
||||
this.setState({type: value});
|
||||
};
|
||||
|
||||
actions = [
|
||||
{ label: 'Disagree', primary: true, onClick: this.handleToggle },
|
||||
{ label: 'Agree', primary: true, onClick: this.handleToggle }
|
||||
|
@ -23,11 +36,19 @@ class DialogTest extends React.Component {
|
|||
<section>
|
||||
<h5>Dialog</h5>
|
||||
<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} />
|
||||
<ContextComponent>
|
||||
<Dialog
|
||||
actions={this.actions}
|
||||
active={this.state.active}
|
||||
type={this.state.type}
|
||||
title="Use Google's location service?"
|
||||
onOverlayClick={this.handleToggle}
|
||||
onEscKeyDown={this.handleToggle}
|
||||
|
|
Loading…
Reference in New Issue