consul/ui/packages/consul-ui/app/components/tab-nav/index.hbs

55 lines
1.4 KiB
Handlebars

{{!
Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: BUSL-1.1
}}
{{#let (dom-position (set this 'style') offset=true) 'tab' as |select name|}}
<nav
style={{{if
this.style
(concat
'--selected-width:'
this.style.width
';'
'--selected-left:'
this.style.left
';'
'--selected-height:'
this.style.height
';'
'--selected-top:'
this.style.top
)
undefined
}}}
aria-label='Secondary'
class={{concat 'tab-nav' ' animatable'}}
...attributes
>
<ul>
{{#each @items as |item|}}
<li
{{on 'click' (fn select)}}
{{did-upsert (if item.selected (fn select) (noop)) @items.length}}
data-test-tab={{concat name '_' (if item.label (slugify item.label) (slugify item))}}
class={{if
(or item.selected (eq selected (if item.label (slugify item.label) (slugify item))))
'selected'
}}
>
<Action
{{on 'click' (fn this.onClick (uppercase item.label))}}
{{on 'click' (fn this.onTabClicked item)}}
@href={{item.href}}
>
{{#if item.tooltip}}
<span {{tooltip item.tooltip}}>{{item.label}}</span>
{{else}}
{{item.label}}
{{/if}}
</Action>
</li>
{{/each}}
</ul>
</nav>
{{/let}}