45 lines
1.2 KiB
Plaintext
45 lines
1.2 KiB
Plaintext
component SegmentedButtonGroup {
|
|
props {
|
|
label = "Options"
|
|
items = []
|
|
active = ""
|
|
size = "md"
|
|
fullWidth = false
|
|
class = ""
|
|
}
|
|
|
|
state current = active
|
|
|
|
view {
|
|
<div
|
|
class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
|
|
role="tablist"
|
|
aria-label="{label}"
|
|
>
|
|
{#each items as item, index}
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="{current === item.value}"
|
|
disabled="{item.disabled}"
|
|
class="wire-segmented-group__button"
|
|
class:wire-segmented-group__button--active='{current === item.value}'
|
|
@click="current = item.value"
|
|
>
|
|
{#if item.icon}
|
|
<span class="wire-segmented-group__icon {item.icon}" aria-hidden="true"></span>
|
|
{/if}
|
|
|
|
<span class="wire-segmented-group__label">{item.label}</span>
|
|
|
|
{#if item.badge}
|
|
<span class="wire-segmented-group__badge">{item.badge}</span>
|
|
{/if}
|
|
</button>
|
|
{:empty}
|
|
<span class="wire-segmented-group__empty">No options available</span>
|
|
{/each}
|
|
</div>
|
|
}
|
|
}
|