Segmented control is a linear set of two or more segments (buttons), each of which functions as a mutually exclusive button. Within the control, all buttons are equal in width. Segmented controls are often used to display different views (switch tabs).
There are following components included:
Segmented
- segmented wrapper for buttonsSegmentedButton
- single segmented buttonName | Type | Default | Description |
---|---|---|---|
activeButtonIndex | number | undefined | Only for |
childButtonsLength | number | undefined | Only for |
colors | object | Object with Tailwind CSS colors classes | |
colors.border | string | 'border-primary' | Outline segmented border color |
colors.divide | string | 'divide-primary' | Outline segmented divider color |
outline | boolean | false | Makes segmented outline |
raised | boolean | false | Makes segmented raised |
rounded | boolean | false | Makes segmented rounded |
strong | boolean | false | Makes segmented strong |
SegmentedButton
component extends Button
component, it supports all Button
props and the following additional props:
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Highlights button as active |
rounded | boolean | false | Makes segmented button rounded (should be used within |
strong | boolean | false | Makes strong segmented button (should be used within |
onClick | function(e) |
|
<script>import {Page,Navbar,NavbarBackLink,Segmented,SegmentedButton,Block,BlockTitle,} from 'konsta/svelte';let activeSegmented = 1;</script><Page><Navbar title="Segmented Control" /><BlockTitle>Default Segmented</BlockTitle><Block strong class="space-y-4"><Segmented><SegmentedButtonactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented><Segmented rounded><SegmentedButtonactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented></Block><BlockTitle>Raised Segmented</BlockTitle><Block strong class="space-y-4"><Segmented raised><SegmentedButtonactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented><Segmented raised rounded><SegmentedButtonactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented></Block><BlockTitle>Outline</BlockTitle><Block strong class="space-y-4"><Segmented outline><SegmentedButtonactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented><Segmented rounded outline><SegmentedButtonactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented></Block><BlockTitle>Strong Segmented</BlockTitle><Block strong class="space-y-4"><SegmentedstrongactiveButtonIndex={activeSegmented - 1}childButtonsLength={3}><SegmentedButtonstrongactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonstrongactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonstrongactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented><SegmentedstrongroundedactiveButtonIndex={activeSegmented - 1}childButtonsLength={3}><SegmentedButtonstrongroundedactive={activeSegmented === 1}onClick={() => (activeSegmented = 1)}>Button</SegmentedButton><SegmentedButtonstrongroundedactive={activeSegmented === 2}onClick={() => (activeSegmented = 2)}>Button</SegmentedButton><SegmentedButtonstrongroundedactive={activeSegmented === 3}onClick={() => (activeSegmented = 3)}>Button</SegmentedButton></Segmented></Block></Page>