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>
|
2015-11-17 23:49:27 +03:00
|
|
|
<Button label='Show Snackbar' raised onClick={this.handleClick} />
|
2015-11-01 17:19:45 +03:00
|
|
|
<Snackbar
|
|
|
|
action='Nice'
|
2015-11-28 22:15:26 +03:00
|
|
|
icon='question_answer'
|
2015-11-01 17:19:45 +03:00
|
|
|
label='A new developer started using React Toolbox'
|
|
|
|
onClick={this.handleSnackbarClick}
|
|
|
|
ref='snackbar'
|
|
|
|
type='accept'
|
|
|
|
/>
|
|
|
|
</section>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## Properties
|
|
|
|
|
2016-04-07 04:24:31 +03:00
|
|
|
| Name | Type | Default | Description|
|
2015-11-01 17:19:45 +03:00
|
|
|
|:-----|:-----|:-----|:-----|
|
2016-04-07 04:24:31 +03:00
|
|
|
| `action` | `String` | | Label for the action component inside the Snackbar.|
|
|
|
|
| `active` | `Boolean` | `false` | If true, the snackbar will be active.|
|
|
|
|
| `className` | `String` | `''` | Additional class name to provide custom styling.|
|
|
|
|
| `icon` | `String` or `Element` | | String key for an icon or Element which will be displayed in left side of the snackbar.|
|
|
|
|
| `label` | `String` | | Text to display in the content. Required.|
|
|
|
|
| `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`|
|