mirror of https://github.com/hashicorp/consul
82 lines
2.1 KiB
Markdown
82 lines
2.1 KiB
Markdown
---
|
|
class: ember
|
|
---
|
|
# EmptyState
|
|
|
|
Consul UIs default 'empty state' used for when we retrive an empty result set,
|
|
whether that set is successful or erroneous. This is mainly used via the
|
|
`ErrorState` component, so also consider using that directly instead of this
|
|
component if dealing with errors.
|
|
|
|
## Arguments
|
|
|
|
| Argument | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `login` | `Function` | `undefined` | A login action to call when the login button is pressed (if not provided no login button will be shown |
|
|
|
|
Icons are controlled via a `status-xxx` class. `xxx` should be some sort of
|
|
3 digit error code, special icons are used for `404` and `403`, otherwise a
|
|
generic icon will be used. To add any further special icons please add to the
|
|
component's `skin` file.
|
|
|
|
If the `@login` attribute is provided, a button will be shown directly
|
|
underneath the body text clicking on which will fire the provided `@login`
|
|
function.
|
|
|
|
```hbs preview-template
|
|
<EmptyState
|
|
class="status-404"
|
|
@login={{noop}}
|
|
>
|
|
<BlockSlot @name="header">
|
|
<h2>
|
|
Header
|
|
</h2>
|
|
</BlockSlot>
|
|
<BlockSlot @name="subheader">
|
|
<h3>
|
|
Subheader
|
|
</h3>
|
|
</BlockSlot>
|
|
<BlockSlot @name="body">
|
|
<p>
|
|
Body text
|
|
</p>
|
|
</BlockSlot>
|
|
<BlockSlot @name="actions">
|
|
<li>
|
|
<Hds::Link::Standalone
|
|
@text='Documentation on namespaces'
|
|
@href="{{env 'CONSUL_DOCS_URL'}}/commands/namespace"
|
|
@icon='docs-link'
|
|
@iconPosition='trailing'
|
|
@size='small'
|
|
/>
|
|
</li>
|
|
<li>
|
|
<Hds::Link::Standalone
|
|
@text='Read the guide'
|
|
@href="{{env 'CONSUL_DOCS_LEARN_URL'}}/consul/namespaces/secure-namespaces"
|
|
@icon='learn-link'
|
|
@iconPosition='trailing'
|
|
@size='small'
|
|
/>
|
|
</li>
|
|
</BlockSlot>
|
|
</EmptyState>
|
|
```
|
|
|
|
The component has four slots for specifying header, subheader, body and
|
|
'actions', although the component will show a minimal empty slot if only the
|
|
body slot is specified:
|
|
|
|
```hbs preview-template
|
|
<EmptyState>
|
|
<BlockSlot @name="body">
|
|
<p>
|
|
Minimal text
|
|
</p>
|
|
</BlockSlot>
|
|
</EmptyState>
|
|
```
|