Flux

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>

Icon only

Omit the label to render compact, icon-only segments.

<template>
    <FluxSegmentedControl v-model="align">
        <FluxSegmentedControlItem
            value="left"
            icon="align-left"/>

        <FluxSegmentedControlItem
            value="center"
            icon="align-center"/>

        <FluxSegmentedControlItem
            value="right"
            icon="align-right"/>
    </FluxSegmentedControl>
</template>

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

    const align = ref('left');
</script>

Labels only

Omit the icon to render text-only segments.

<template>
    <FluxSegmentedControl v-model="range">
        <FluxSegmentedControlItem
            value="day"
            label="Day"/>

        <FluxSegmentedControlItem
            value="week"
            label="Week"/>

        <FluxSegmentedControlItem
            value="month"
            label="Month"/>
    </FluxSegmentedControl>
</template>

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

    const range = ref('week');
</script>

Custom content

Use the default slot to render custom content such as an icon with a badge.

<template>
    <FluxSegmentedControl v-model="folder">
        <FluxSegmentedControlItem value="inbox">
            <FluxIcon name="message"/>
            <span>Inbox</span>
            <FluxBadge label="12"/>
        </FluxSegmentedControlItem>

        <FluxSegmentedControlItem value="archive">
            <FluxIcon name="box"/>
            <span>Archive</span>
        </FluxSegmentedControlItem>
    </FluxSegmentedControl>
</template>

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

    const folder = ref('inbox');
</script>

Used components ​