124fa8f168
- 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) |
||
---|---|---|
.. | ||
index.hbs | ||
index.scss | ||
layout.scss | ||
README.mdx | ||
skin.scss |
# Notice Presentational component for informational/warning/error banners/notices. ```hbs preview-template <Notice @type={{this.type}} as |notice|> <notice.Header> <h3>Header</h3> </notice.Header> <notice.Body> <p> Body </p> </notice.Body> <notice.Footer> <p> <a href="">Footer link</a> </p> </notice.Footer> </Notice> <figure> <figcaption>Provide a widget to change the <code>@type</code></figcaption> <select onchange={{action (mut this.type) value="target.value"}} > <option>info</option> <option>success</option> <option>warning</option> <option>error</option> </select> </figure> ``` ## Arguments | Argument/Attribute | Type | Default | Description | | --- | --- | --- | --- | | `type` | `String` | `info` | Type of notice [info\|warning\|error] | ## See - [Template Source Code](./index.hbs) ---