50 lines
1.3 KiB
Handlebars
50 lines
1.3 KiB
Handlebars
{{#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}} |