Tabs
Visualization & Interaction
Display content depending on the selected Tab
Content: 1
Quickstart #
<script>
import { Tabs } from "@steeze-ui/components"
let selected = 0
let items = [
{title: "Tab 1"},
{title: "Tab 2"}
]
</script>
<Tabs bind:selected {items} />API Reference #
| Property | Type | Default |
|---|---|---|
items
|
Tab[]
|
-
|
selected
|
Number
|
0
|
Styling #
| Name | Default |
|---|---|
--st-tabs-gap
|
2rem
|
--st-tabs-line-width
|
1px
|
--st-tabs-line-color
|
transparent
|
--st-tab-bg-color
|
transparent
|
--st-tab-padding
|
0.5rem 0
|
--st-tab-line-width
|
2px
|
--st-tab-color
|
--st-body-text-color
|
--st-tab-font-weight
|
--st-font-weight-medium
|
--st-tab-border-radius
|
--st-border-radius-sm
|
--st-tab-active-color
|
--st-primary-color
|
--st-tab-line-hover-color
|
--st-tabs-border-color
|
--st-tab-line-active-color
|
--st-colors-primary4
|
Examples #
Use with custom Tab
You can use a completly custom tab instead of the default one
<script>
import { Tabs } from '@steeze-ui/components'
</script>
<Tabs items={[ {title: "Tab 2"}, {title: "Tab 2"} ]}>
<button
slot="tab"
role="tab"
let:id let:item let:isActive let:setSelected
{id} aria-selected={isActive}
tabindex={isActive ? 0 : -1}
on:click={setSelected}
style:color={isActive ? "blue" : "black"}
>
{item.title}
</button>
</Tabs>