react-toolbox/components/snackbar/readme.md

63 lines
2.5 KiB
Markdown
Raw Permalink Normal View History

2015-11-01 17:19:45 +03:00
# Snackbar
Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.
<!-- example -->
```jsx
import { Button, Snackbar } from 'react-toolbox';
class SnackbarTest extends React.Component {
handleClick = () => {
this.refs.snackbar.show();
};
handleSnackbarClick = () => {
this.refs.snackbar.hide();
};
render () {
return (
<section>
<Button label='Show Snackbar' raised onClick={this.handleClick} />
2015-11-01 17:19:45 +03:00
<Snackbar
action='Nice'
label='A new developer started using React Toolbox'
onClick={this.handleSnackbarClick}
ref='snackbar'
type='accept'
/>
</section>
);
}
}
```
This component can be styled by context providing a theme with the key `RTSnackbar` through the theme provider.
2015-11-01 17:19:45 +03:00
## Properties
| Name | Type | Default | Description|
2015-11-01 17:19:45 +03:00
|:-----|:-----|:-----|:-----|
| `action` | `String` | | Label for the action component inside the Snackbar.|
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
2016-10-08 13:27:57 +03:00
| `children` | `String or Element` | `false` | Text or node to be displayed in the content as alternative to `label`.|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
2016-10-08 13:27:57 +03:00
| `label` | `String or Element` | | Text to display in the content.|
| `onClick` | `Function` | | Callback function that will be called when the button action is clicked.|
| `onTimeout` | `Function` | | Callback function when finish the set timeout.|
| `timeout` | `Number` | | Amount of time in milliseconds after the Snackbar will be automatically hidden.|
| `type` | `String` | | Indicates the action type. Can be `accept`, `warning` or `cancel`|
2016-05-25 01:41:26 +03:00
## Theme
2016-05-25 01:41:26 +03:00
| Name | Description|
|:---------|:-----------|
| `accept` | Added to the root element in case it's accept type.|
| `active` | Added to the root element when its active.|
| `button` | Used for the button inside the component.|
| `cancel` | Added to the root element in case it's cancel type.|
| `label` | Used for the label element.|
Migrate styles to PostCSS (#666) * 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 da0c47041ecf2d8b118b06fba9f53cc4d7e1e79f. * Remove normalize.css from commons.css * Update dependencies * Latest build * Input ready to accept visible hint * Prepare slider and progress to be disabled * Render Snackbar using Portal * Refactor Dialog, Drawer and Overlay to be used in Layout * Add inner layer to AppBar * New layout * Use Layout in spec * Latest build * remove layout playground example * add smTablet and lgTablet to NavDrawer in Layout readme * add default prop className to Layout, NavDrawer and Sidebar * fix css linter errors in card and slider * Typings for Table component * Add missing Drawer identifier * Update lib build * Adds onQueryChange callback property to Autocomplete The onQueryChange callback is called when the value of the query changes in Autocomplete. It is called with the new query value. * Fix #966 * Fix #965 * Fixes #976 * Updated css-related dependencies Removed usages of `addDependencyTo` since it's deprecated and not needed anymore. See https://github.com/postcss/postcss-import#adddependencyto * Enabled HMR for styles by disabling extracting them to a CSS file * Remove lib from repo * Remove lib * Fixes #1021 * Build using Gulp * Export ThemeProvider from react-css-themr * Add CHANGELOG to release command * Release 2.0.0-beta.1 * Remove immutability helper * Update dependencies * Fix Tooltip trying to render after it's been unmounted * Fixes #1038 * Release 2.0.0-beta.2 * Add ramda, refactor utils and remove slide animation modules * Remove separate slide animations modules * Remove box-sizing reset and body rule * Remove commons.css * Release 2.0.0-beta.4 * Update dependencies * Fixes #1061 * More aggresive guard condition for multiple autocomplete * Fix typeof check in isBrowser function * Fixes an issue when specs are opened with browsers that do not support Object.entries(). * Import from ramda using the 'import XXX from "ramda/src/XXX"' pattern so that bundle sizes will be smaller for not including the whole ramda package. * Fix #1032 * Fix tests * Update yarn.lock * Fixes #1064
2017-01-05 04:42:18 +03:00
| `portal` | Used for the portal container element.|
2016-05-25 01:41:26 +03:00
| `snackbar` | Used as the className for the root element of the component.|
| `warning` | Added to the root element in case it's warning type.|