81acda7162
* Add postcss-next postcss-include and reporter
* Add stylelint
* Add CSS colors
* Add CSS custom media queries
* Use dashes for CSS colors
* Add base CSS variables
* Remove AppBar SASS dependency from spec page
* Migrate AppBar style to PostCSS
* Migrate Avatar style to PostCSS
* Migrate Ripple style to PostCSS
* Remove unneeded media CSS import in Avatar
* Add shadows to CSS variables
* Migrate Button style to PostCSS
* Update webpack test config and linting from npm
* Migrate Input style to PostCSS
* Add missing input config variables for Dropdown and Autocomplete
* Migrate Chip style to PostCSS
* Migrate Autocomplete style to PostCSS
* Migrate Dropdown style to PostCSS
* Migrate animations to PostCSS
* Migrate Card style to PostCSS
* Migrate Checkbox style to PostCSS
* Migrate DataPicker style to PostCSS
* Migrate Dialog style to PostCSS
* Migrate Drawer style to PostCSS
* Add postcss-mixins and postcss-each
* Migrate Layout style to PostCSS
* Fix bug in button theme
* Bugfix in avatar css
* Add some missing nesting notations
* Migrate Link style to PostCSS
* Migrate List style to PostCSS
* Migrate Menu style to PostCSS
* Migrate Navigation style to PostCSS
* Migrate Overlay style to PostCSS
* Migrate ProgressBar style to PostCSS
* Migrate Radio style to PostCSS
* Migrate Slider style to PostCSS
* Migrate Snackbar style to PostCSS
* Migrate Switch style to PostCSS
* Migrate Table style to PostCSS
* Migrate Tabs style to PostCSS
* Migrate TimePicker to PostCSS
* Migrate Tooltip styles to PostCSS
* Update webpack config for testing and tests
* Migrate commons to PostCSS
* Remove sass from main project
* Bye from docs to sass
* Build with CSS
* Remove unneded deps for sass in docs subproject
* Fix tests
* use 4p shadow in AppBar as spec indicates
* Fixed typo in list/config.css
* Fix tests
* Fix linter errors
* Latest build
* Release 2.0.0-beta.0
* Remove sass lint
* fixes old sass var in css config
* Update linter
* New Table implementation
* Fix old sass var in list/config.css
See
|
||
---|---|---|
.. | ||
Dialog.js | ||
config.css | ||
index.d.ts | ||
index.js | ||
readme.md | ||
theme.css |
readme.md
Dialog
Dialogs contain text and UI controls focused on a specific task. They inform users about critical information, require users to make decisions, or involve multiple tasks. You would need an additional component to take actions and display or hide the dialog.
import Dialog from 'react-toolbox/lib/dialog';
class DialogTest extends React.Component {
state = {
active: false
};
handleToggle = () => {
this.setState({active: !this.state.active});
}
actions = [
{ label: "Cancel", onClick: this.handleToggle },
{ label: "Save", onClick: this.handleToggle }
];
render () {
return (
<div>
<Button label='Show my dialog' onClick={this.handleToggle} />
<Dialog
actions={this.actions}
active={this.state.active}
onEscKeyDown={this.handleToggle}
onOverlayClick={this.handleToggle}
title='My awesome dialog'
>
<p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
</Dialog>
</div>
);
}
}
If you want to provide a theme via context, the component key is RTDialog
.
Properties
Name | Type | Default | Description |
---|---|---|---|
actions |
Array |
[] |
A array of objects representing the buttons for the dialog navigation area. The properties will be transferred to the buttons. |
active |
Boolean |
false |
If true, the dialog will be active. |
className |
String |
'' |
Sets a class to give customized styles to the dialog. |
onEscKeyDown |
Function |
Callback called when the ESC key is pressed with the overlay active. | |
onOverlayClick |
Function |
Callback to be invoked when the dialog overlay is clicked. | |
onOverlayMouseDown |
Function |
Callback called when the mouse button is pressed on 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. | |
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 , 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
Name | Description |
---|---|
active |
Used for the root when the dialog is active. |
body |
Used to wrap the dialog body. |
button |
Used in buttons when the dialog implements actions. |
dialog |
Used for the root element. |
navigation |
Used for the navigation element when it implements actions. |
title |
Used for the title element of the dialog. |
wrapper |
A wrapper class for the top of the root. |