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 |
component | string | 'div' | Component's HTML Element |
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 |
component | string | 'button' | Component's HTML Element |
rounded | boolean | false | Makes segmented button rounded (should be used within |
strong | boolean | false | Makes strong segmented button (should be used within |
<template><k-page><k-navbar title="Segmented Control" /><k-block-title>Default Segmented</k-block-title><k-block strong class="space-y-4"><k-segmented><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented rounded><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block><k-block-title>Raised Segmented</k-block-title><k-block strong class="space-y-4"><k-segmented raised><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented raised rounded><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block><k-block-title>Outline</k-block-title><k-block strong class="space-y-4"><k-segmented outline><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented rounded outline><k-segmented-button:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-button:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block><k-block-title>Strong Segmented</k-block-title><k-block strong class="space-y-4"><k-segmented strong><k-segmented-buttonstrong:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-buttonstrong:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-buttonstrong:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented><k-segmented strong rounded><k-segmented-buttonstrongrounded:active="activeSegmented === 1"@click="() => (activeSegmented = 1)">Button</k-segmented-button><k-segmented-buttonstrongrounded:active="activeSegmented === 2"@click="() => (activeSegmented = 2)">Button</k-segmented-button><k-segmented-buttonstrongrounded:active="activeSegmented === 3"@click="() => (activeSegmented = 3)">Button</k-segmented-button></k-segmented></k-block></k-page></template><script>import { ref } from 'vue';import {kPage,kNavbar,kNavbarBackLink,kSegmented,kSegmentedButton,kBlock,kBlockTitle,} from 'konsta/vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kSegmented,kSegmentedButton,kBlock,kBlockTitle,},setup() {const activeSegmented = ref(1);return {activeSegmented,};},};</script>