mirror of
https://github.com/status-im/consul.git
synced 2025-01-10 05:45:46 +00:00
3f131dcf34
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
35 lines
843 B
Plaintext
35 lines
843 B
Plaintext
# notification
|
|
|
|
Consul UIs notification modifier is used to 'hoist' DOM elements into the
|
|
global notification area for the UI. The most common usage will be something
|
|
like the below:
|
|
|
|
```hbs preview-template
|
|
<figure>
|
|
<figcaption>Attach a Warning notice to the top of the app ^^^</figcaption>
|
|
|
|
<Notice
|
|
class="notification-update"
|
|
@type="warning"
|
|
{{notification
|
|
sticky=true
|
|
}}
|
|
as |notice|>
|
|
<notice.Header>
|
|
<strong>Warning!</strong>
|
|
</notice.Header>
|
|
<notice.Body>
|
|
<p>
|
|
This service has been deregistered and no longer exists in the catalog.
|
|
</p>
|
|
</notice.Body>
|
|
</Notice>
|
|
|
|
</figure>
|
|
```
|
|
|
|
Currently this is backed by `ember-cli-flash` and the named options are
|
|
currently options that can be accepted by `ember-cli-flash`. Be aware that this
|
|
is likely to change in the future.
|
|
|