25 lines
1.1 KiB
Plaintext
25 lines
1.1 KiB
Plaintext
component Stepper {
|
|
outputs {
|
|
change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
|
previous(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
next(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
complete(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
label: string = "Stepper"
|
|
items: unknown[] = []
|
|
active: string = ""
|
|
orientation: string = "horizontal"
|
|
class: string = ""
|
|
}
|
|
view {
|
|
<nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--stepper wire-next--{orientation} {class}" aria-label="{label}">
|
|
{#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
|
|
<slot />
|
|
</nav>
|
|
}
|
|
}
|