mirror of https://github.com/hashicorp/consul
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)
|
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
| index.scss | ||
| layout.scss | ||
| skin.scss | ||
README.mdx
---
class: ember
state: needs-love
---
# AppView
`<AppView />` is our current top level wrapping component (one level in from
the app chrome), every 'top level main section/template' should have one of
these.
This component will potentially be renamed to `Page` or `View` or similar now
that we don't need two words.
Other than that it provides the basic layout/slots for our main title, search
bar, top right hand actions and main content.
The large top margin that is visible when no breadcrumbs are visible is there
to ensure that the page doesn't 'jump around' when you navigate to a page with
breadcrumbs and back again.
```hbs preview-template
<figure>
<AppView>
<BlockSlot @name="header">
<h1>
Main title <em>{{format-number "100000"}} total {{pluralize 100000 "thing" without-count=true}} in this page</em>
</h1>
</BlockSlot>
<BlockSlot @name="content">
<EmptyState>
<BlockSlot @name="body">
<p>
Nothing to see here
</p>
</BlockSlot>
</EmptyState>
</BlockSlot>
</AppView>
<figcaption>Basic list-like view</figcaption>
</figure>
```
```hbs preview-template
<figure>
<AppView>
<BlockSlot @name="breadcrumbs">
<ol>
<li><a href="">Hansel</a></li>
<li><a href="">Gretel</a></li>
</ol>
</BlockSlot>
<BlockSlot @name="header">
<h1>
Scary witch's gingerbread house <em>(run away quick!)</em>
</h1>
</BlockSlot>
<BlockSlot @name="actions">
<Action
{{on "click" (noop)}}
>
Run away!
</Action>
</BlockSlot>
<BlockSlot @name="content">
<EmptyState>
<BlockSlot @name="body">
<p>
Double, double toil and trouble
</p>
</BlockSlot>
</EmptyState>
</BlockSlot>
</AppView>
<figcaption>Basic detail-like view</figcaption>
</figure>
```
## Slots
| Name | Description |
| --- | --- |
| `header` | The main title of the page, you probably want to put a `<h1>` in here |
| `content` | The main content of the page, and potentially an `<Outlet />` somewhere |
| `breadcrumbs` | Any breadcrumbs, you probably want an `ol/li/a` in here |
| `actions` | Any actions relevant for the entire page, probably using `<Action />` |
| `nav` | Secondary navigation goes in here, also see `<TabNav />` |
| `toolbar` | Rendered underneath the header and actions for various 'toolbar' type things, such as our SearchBars |
## Portals
| Name | Description |
| --- | --- |
| `app-view-actions` | Provides a portal to render additional page actions from any views. This is rendered **before** the contents of the `actions` slot |