Flux

Appearance

Segmented control item ​

The segmented control item represents an individual segment within the segmented control. Each item carries a value; selecting it updates the segmented control's v-model to that value. An item can render an icon, a label, or fully custom content.

WARNING

This component is best used within a Segmented control.

Props

value: string | number
The value of the segment, bound to the segmented control's model.

disabled?: boolean
If the segment is disabled.

icon?: FluxIconName
The icon of the segment.

label?: string
The label of the segment.

Slots

default
The content of the segment. Falls back to the icon and label.

Examples ​

Basic

A basic segmented control item.

<template>
    <FluxSegmentedControl v-model="view">
        <FluxSegmentedControlItem
            value="grid"
            icon="grid-2"
            label="Grid"/>

        <FluxSegmentedControlItem
            value="list"
            icon="list"
            label="List"/>
    </FluxSegmentedControl>
</template>

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

    const view = ref('grid');
</script>

Disabled

A segmented control with a disabled item.

<template>
    <FluxSegmentedControl v-model="view">
        <FluxSegmentedControlItem
            value="grid"
            icon="grid-2"
            label="Grid"/>

        <FluxSegmentedControlItem
            value="list"
            icon="list"
            label="List"/>

        <FluxSegmentedControlItem
            value="stack"
            icon="rectangle-history"
            label="Stack"
            disabled/>
    </FluxSegmentedControl>
</template>

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

    const view = ref('grid');
</script>

Used components ​