Segmented control

This component is a UI element that allows users to choose between multiple options by selecting one of the multiple segments. Each segment is represented as a button with a distinct label, and the currently selected segment is visually indicated, for example, by a highlighted background. It is commonly used in navigation, forms, or settings, providing a compact and intuitive way for users to make a choice.

Props

model-value?: number
The selected item index.

is-fill?: boolean
Allows the segmented control to fill in its parent.

items?: FluxSegmentedControlItemObject[]
The items of the segmented control.

Emits

update:model-value: [number]
Triggered when the selected item changes.

Examples

Basic

A basic segmented control.

Preview

Code

<template>
    <FluxSegmentedControl
        :items="items"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxSegmentedControl } from '@flux-ui/components';
    import { ref } from 'vue';
    import { FluxSegmentedControlItemObject } from '@flux-ui/types';

    const items = ref<FluxSegmentedControlItemObject[]>([
        {label: 'Grid'},
        {label: 'List'},
        {label: 'Stack'}
    ]);
</script>

Icons

A segmented control with icons only.

Preview

Code

<template>
    <FluxSegmentedControl
        :items="items"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxSegmentedControl } from '@flux-ui/components';
    import { ref } from 'vue';
    import { FluxSegmentedControlItemObject } from '@flux-ui/types';

    const items = ref<FluxSegmentedControlItemObject[]>([
        {icon: 'grid-2'},
        {icon: 'list'},
        {icon: 'rectangle-history'}
    ]);
</script>

Used components

• Icon