mirror of https://github.com/hashicorp/consul
0c66bbf2b4 | ||
---|---|---|
.. | ||
README.mdx | ||
index.hbs | ||
index.js | ||
index.scss | ||
layout.scss | ||
pageobject.js | ||
skin.scss |
README.mdx
--- 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> ```