Flux

Tabs ​

The tabs component organizes content into separate views, showing one at a time. Each tab switches to its matching content area, keeping related content grouped without crowding the interface.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.

Props

is-pills?: boolean
If the tab bar should be rendered as pills.

model-value?: number
The index of the active tab.

Emits

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

Slots

default
The content of the all the tabs.

tabs ({
    activate(index: number): void;
    readonly children: VNode[];
    readonly modelValue: number;
    readonly tabs: { icon?: FluxIconName; label?: string }[];
})
The content of the tab bar.

content ({
    activate(index: number): void;
    readonly children: VNode[];
    readonly modelValue: number;
    readonly tabs: { icon?: FluxIconName; label?: string }[];
})
The content of the tabs.

Examples ​

Basic

A basic tabs pane.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <FluxPane>
        <FluxTabs>
            <FluxTab
                label="Common">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                label="Advanced">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Icons

A tabs pane with only icons.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <FluxPane>
        <FluxTabs>
            <FluxTab
                icon="cubes">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="desktop">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="puzzle-piece">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Icon and label

A tabs pane with both icons and labels.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <FluxPane>
        <FluxTabs>
            <FluxTab
                icon="cubes"
                label="Components">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="desktop"
                label="Dashboard">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="puzzle-piece"
                label="Internals">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Pills

A tabs pane with the tab bar rendered as pills.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <FluxPane>
        <FluxTabs is-pills>
            <FluxTab
                label="Common">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                label="Advanced">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Pills with icons

A pills tabs pane with only icons.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <FluxPane>
        <FluxTabs is-pills>
            <FluxTab
                icon="cubes">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="desktop">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="puzzle-piece">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Pills with icon and label

A pills tabs pane with both icons and labels.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde. 

<template>
    <FluxPane>
        <FluxTabs is-pills>
            <FluxTab
                icon="cubes"
                label="Components">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="desktop"
                label="Dashboard">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>

            <FluxTab
                icon="puzzle-piece"
                label="Internals">
                <FluxPaneBody>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid aperiam earum facilis fugiat in, itaque laboriosam, libero molestias nulla, pariatur qui quod sequi sint totam? Fuga ipsum placeat unde.
                </FluxPaneBody>
            </FluxTab>
        </FluxTabs>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxPane, FluxPaneBody, FluxTab, FluxTabs } from '@flux-ui/components';
</script>

Used components ​