<:import src="base.htm" /> <:define tag="bs-nav:ul" // parameters ::items=${[ { name: 'Active', link: '#', active: true }, { name: 'Link', link: '#' }, { name: 'Disabled', link: '#', disabled: true }, ]} ::variant=${null} // 'tabs' | 'pills' | 'underline' ::fill=${false} ::justified=${false} ::vertical=${false} ::align=${'start'} // 'start' | 'center' | 'end' ::toggle=${null} // 'tab' | 'pill' — for tabbed panes // private :_class=${[ 'nav', variant ? `nav-${variant}` : '', fill ? 'nav-fill' : '', justified ? 'nav-justified' : '', vertical ? 'flex-column' : '', align === 'center' ? 'justify-content-center' : '', align === 'end' ? 'justify-content-end' : '', ].filter(s => s).join(' ')} class=${_class} role=${toggle ? 'tablist' : null} >

${item.name} ${item.name}

<:define tag="bs-tab-content:div" class="tab-content"> <:slot /> <:define tag="bs-tab-pane:div" class="tab-pane fade" role="tabpanel" // parameters ::name=${null} ::active=${false} id=${name} :class-show=${active} :class-active=${active} tabindex="0" > <:slot />