v0.11.0

Segmented Control Vue Component

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

NameTypeDefaultDescription
activeButtonIndexnumberundefined

Only for strong segmented. Active index of the currently active button. If not specified it will look in child components for button with active or segmenterActive prop.

childButtonsLengthnumberundefined

Only for strong segmented. Amount of segmented buttons. If not specified it will look on the amount of child components.

colorsobject

Object with Tailwind CSS colors classes

colors.borderstring'border-primary'

Outline segmented border color

colors.dividestring'divide-primary'

Outline segmented divider color

componentstring'div'

Component's HTML Element

outlinebooleanfalse

Makes segmented outline

raisedbooleanfalse

Makes segmented raised

roundedbooleanfalse

Makes segmented rounded

strongbooleanfalse

Makes segmented strong

SegmentedButton Props

SegmentedButton component extends Button component, it supports all Button props and the following additional props:

NameTypeDefaultDescription
activebooleanfalse

Highlights button as active

componentstring'button'

Component's HTML Element

roundedbooleanfalse

Makes segmented button rounded (should be used within <Segmented rounded>)

strongbooleanfalse

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 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-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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.