SlidingSegmentedControl

A iOS-style segmented control with a sliding thumb.

Usage

Use SlidingSegmentedControl to select one option from a set. The selection is mutually exclusive.

Selected: map

Map

Transit

Satellite

Sizes (Selected: s)

Small

Medium

Large

Extra Large (Disabled)

Custom Decoration (Selected: a)

Option A

Option B

Option C

Code Example

<script setup lang="ts">
import { ref } from "vue";
import {
  SlidingSegmentedControl,
  Container,
  Text,
  Column,
  SizedBox,
  BoxDecoration,
  Border,
  EdgeInsets,
  BorderRadius,
} from "fluekit";

const selectedValue = ref("map");
const selectedSize = ref("s");
const customStyle = ref("a");
</script>

<template>
  <Container
    height="450"
    :padding="EdgeInsets.all(10)"
    :decoration="
      BoxDecoration({
        border: Border.all({ width: 1, color: '#eee' }),
      })
    "
    width="100%"
  >
    <Column expanded crossAxisAlignment="center">
      <Text>Selected: {{ selectedValue }}</Text>
      <SizedBox :height="10" />
      <SlidingSegmentedControl
        v-model="selectedValue"
        :options="{
          map: 'Map',
          transit: 'Transit',
          satellite: 'Satellite',
        }"
      />
      <SizedBox :height="40" />
      <Text>Sizes (Selected: {{ selectedSize }})</Text>
      <SizedBox :height="10" />
      <SlidingSegmentedControl
        v-model="selectedSize"
        :options="{
          s: 'Small',
          m: 'Medium',
          l: 'Large',
          xl: 'Extra Large (Disabled)',
        }"
        :disabledKeys="['xl']"
      />
      <SizedBox :height="40" />
      <Text>Custom Decoration (Selected: {{ customStyle }})</Text>
      <SizedBox :height="10" />
      <SlidingSegmentedControl
        v-model="customStyle"
        :options="{
          a: 'Option A',
          b: 'Option B',
          c: 'Option C',
        }"
        :decoration="
          BoxDecoration({
            color: '#e0f7fa',
            borderRadius: BorderRadius.circular(20),
            border: Border.all({ width: 2, color: '#006064' }),
          })
        "
        :thumbDecoration="
          BoxDecoration({
            color: '#00acc1',
            borderRadius: BorderRadius.circular(16),
          })
        "
      />
    </Column>
  </Container>
</template>

Props

Prop	Type	Default	Description
modelValue	string | number	-	The currently selected key.
options	Record<string | number, string>	-	Map of values to labels.
disabledKeys	(string | number)[]	[]	List of keys that should be disabled.
backgroundColor	string | Color	systemGrey5	Background color of the control.
thumbColor	string | Color	white	Color of the sliding thumb.
decoration	BoxDecoration	-	Custom decoration for the control container.
thumbDecoration	BoxDecoration	-	Custom decoration for the sliding thumb.
padding	EdgeInsets	EdgeInsets.all(2)	Padding around the control content.

Events

Name	Description
update:modelValue	Emitted when selection changes.