Segmented view

The segmented view displays the content associated with the currently selected segment of a segmented control. When a user switches segments, the segmented view updates to show the relevant section while hiding the others. This allows multiple related views to share the same space in the interface, keeping the layout clean and focused while providing quick, seamless transitions between content areas.

Grid

WARNING

This component is best used within a Segmented control.

Props

index: number
The current active segment index.

Slots

default
The content of the segmented view.

Examples

Basic

A basic segmented control.

Preview

Grid

Code

<template>
    <FluxPane style="width: max-content">
        <FluxPaneBody>
            <FluxSegmentedControl
                v-model="index"
                :items="items"
                style="width: 390px"/>
        </FluxPaneBody>

        <FluxSegmentedView
            :index="index">
            <FluxPaneBody>
                Grid
            </FluxPaneBody>

            <FluxPaneBody>
                List
            </FluxPaneBody>

            <FluxPaneBody>
                Stack
            </FluxPaneBody>
        </FluxSegmentedView>
    </FluxPane>
</template>

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

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

Icons

A segmented control with icons only.

Preview

Grid

Code

<template>
    <FluxPane style="width: max-content">
        <FluxPaneBody>
            <FluxSegmentedControl
                v-model="index"
                :items="items"
                style="width: 390px"/>
        </FluxPaneBody>

        <FluxSegmentedView
            :index="index">
            <FluxPaneBody>
                Grid
            </FluxPaneBody>

            <FluxPaneBody>
                List
            </FluxPaneBody>

            <FluxPaneBody>
                Stack
            </FluxPaneBody>
        </FluxSegmentedView>
    </FluxPane>
</template>

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

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