mirror of https://github.com/hashicorp/consul
6589cbbd0d
* ui: Add the most basic workspace root in /ui * We already have a LICENSE file in the repository root * Change directory path in build scripts ui-v2 -> ui * Make yarn install flags configurable from elsewhere * Minimal workspace root makefile * Call the new docker specific target * Update yarn in the docker build image * Reconfigure the netlify target and move to the higher makefile * Move ui-v2 -> ui/packages/consul-ui * Change repo root to refleect new folder structure * Temporarily don't hoist consul-api-double * Fixup CI configuration * Fixup lint errors * Fixup Netlify target |
||
|---|---|---|
| .. | ||
| README.mdx | ||
| index.hbs | ||
| index.js | ||
README.mdx
## State
`<State @state={{matchableStateObject}} @matches="idle">Currently Idle</State>`
`<State />` is a renderless component that eases rendering of different states
from within templates. State objects could be manually made state objects and
xstate state objects. It's very similar to a normal conditional in that if the
state identifier matches the current state, the contents of the component will
be shown.
### Arguments
| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `state` | `object` | | An object that implements a `match` method |
| `matches` | `String\|Array` | | A state identifier (or array of state identifiers) to match on |
### Example
```handlebars
<State @state={{state}} @matches="idle">
Currently Idle
</State>
<State @state={{state}} @matches="loading">
Currently Loading
</State>
<State @state={{state}} @matches={{array 'loading' 'idle'}}>
Idle and loading
</State>
```
### See
- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)
---