mirror of https://github.com/hashicorp/consul
78 lines
2.2 KiB
Markdown
78 lines
2.2 KiB
Markdown
---
|
|
state: needs-love
|
|
---
|
|
# TabNav
|
|
|
|
`<TabNav />` renders a list of items as linked tabs (there is also an option
|
|
to use labels vs anchors for links for radio button based tabs).
|
|
|
|
Each item in the list should be a hash of `label`, `href` and `selected`.
|
|
|
|
- `label`: The text to show
|
|
- `href`: a href, probably generated via `href-to`
|
|
- `selected`: whether the item is in the selected state or not, probably
|
|
of the state to transition to.
|
|
|
|
There are two similar event handlers, `@onclick` and `@onTabClick`.
|
|
|
|
When using `@onclick`, the `item.label` is passed to the handler. When using
|
|
`@onTabClick` the entire 'item' is passed instead, therefore you can add
|
|
arbitrary properties to the 'item' to be used in the handler.
|
|
|
|
|
|
**Please note:** This component should probably be rebuilt using contextual
|
|
components, and real events. Alternatively this could be hand built with native
|
|
HTML using the same `nav/ul/li/a` pattern and you could just use the CSS
|
|
component to style it. Unless there is a reason to do this, this component
|
|
should be used pending a refactor (please remove this note once refactored into
|
|
contextual components)
|
|
|
|
```hbs preview-template
|
|
<figure>
|
|
<figcaption>A TabNav with a conditional button using `compact` which removes empty values from arrays</figcaption>
|
|
<TabNav @items={{
|
|
compact
|
|
(array
|
|
(hash label="Health Checks" href="#" selected=true)
|
|
(hash label="Service Instances" href="#" selected=(is-href "docs.something"))
|
|
(if false (hash label="Don't show me" href="#" selected=false) '')
|
|
(hash label="Lock Sessions" href="#" selected=false)
|
|
(hash label="Metadata" href="#" selected=false)
|
|
)
|
|
}}/>
|
|
</figure>
|
|
```
|
|
|
|
A TabNav with using a `StateMachine.dispatch`
|
|
|
|
```hbs
|
|
<figure>
|
|
<figcaption>A TabNav with using a StateMachine.dispatch</figcaption>
|
|
<TabNav @items={{
|
|
compact
|
|
(array
|
|
(hash
|
|
label="1"
|
|
selected=(state-matches fsm.state 'one')
|
|
state="ONE"
|
|
)
|
|
(hash
|
|
label="2"
|
|
selected=(state-matches fsm.state 'two')
|
|
state="TWO"
|
|
)
|
|
)
|
|
}}
|
|
@onTabClicked={{pick 'state' fsm.dispatch}}
|
|
/>
|
|
</figure>
|
|
```
|
|
|
|
```css
|
|
.tab-nav {
|
|
@extend %tab-nav;
|
|
}
|
|
```
|
|
|
|
|