Notification
January 3, 2019 ยท View on GitHub
Shows a temporary message.
Notifications and Snackbars
The information on this page refers to the Notification component, but it also describes the Snackbar component - both components use the same code base, and only differ in appearance (style and transitions).
Notification is a message that appears at the center of the screen. It is not used by Material Design in this form (although there exists an Android-only notification which uses list tiles for layout), but is a common enough design pattern to warrant a ready-made component.
Snackbar is a notification that appears at the bottom of the screen. To use Snackbar, use the example code on this page and substitute Notification with Snackbar.
Main features
- Set timeout duration
- Pause/resume
- Horizontal or vertical layout
- Custom transitions
- Spawn notifications from different locations
Usage
Options
Notification specific options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| action | optional | String, hyperscript or component | Action element; will likely contain a button | |
| containerSelector | optional | String | Selector of container HTML element that will be animated with the Notification (does not need to be the direct parent); for instance if a FAB button needs to move together with the Notification, both the FAB and Notification will be placed in the same container; transitions will then move both simultaneously; if set, the Notification's position will be absolute (default: fixed) | |
| timeout | optional | Number (seconds) | 3 | Duration (in seconds) to show the Notification. After this the Notification hides automatically. Use 0 to not hide automatically. |
| title | required | String | Text |
Notification appearance options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| layout | optional | String: "horizontal" or "vertical" | "horizontal" | Sets the arrangement of the action; by default the action is placed right to the title, but longer action labels better fit below the title |
Spawn options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| id | optional | String | "default_notification" | Notification instance id |
| position | optional | String | "screen" | Set to "container" to give the Notification holder CSS style position: absolute. The container element needs to have position: relative. |
| spawn | optional | String | "default_notification" | Notification spawner id |
Transition options
See: Transitions
Common component options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| after | optional | String, hyperscript or component | Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth | |
| before | optional | String, hyperscript or component | Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth | |
| className | optional | String | Extra CSS class appended to pe-notification | |
| content | optional | String, hyperscript or component | Alternative content; replaces title | |
| element | optional | String | "div" | HTML element tag |
| id | optional | String | HTML element id | |
| style | optional | Object | For setting simple style attributes | |
| tone | optional | String: "dark" or "light" | Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone) |
Composition
Notification is composed from:
- Multi (
polythene-core)