Segmented Control Vue Component

Segmented Components
Segmented Props
SegmentedButton Props
Examples

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).

Segmented Components

There are following components included:

Segmented - segmented wrapper for buttons
SegmentedButton - single segmented button

Segmented Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.borderIos	string	'border-primary'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.divideIos	string	'divide-primary'
colors.divideMaterial	string	'divide-md-light-outline dark:divide-md-dark-outline'
colors.strongBgIos	string	'bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-10'
colors.strongBgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
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 Props

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 `<Segmented rounded>`)
strong	boolean	false	Makes strong segmented button (should be used within `<Segmented strong>`)

Examples

SegmentedControl.vue

<template>
  <k-page>
    <k-navbar title="Segmented Control" />

    <k-block-title>Default Segmented</k-block-title>
    <k-block strong-ios outline-ios 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-ios outline-ios 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-ios outline-ios 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-ios outline-ios class="space-y-4">
      <k-segmented strong>
        <k-segmented-button
          strong
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>

      <k-segmented strong rounded>
        <k-segmented-button
          strong
          rounded
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          rounded
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          rounded
          :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>