Tabs

Tabs are a user interface element used for organizing and navigating content within an application. It consists of clickable tabs that correspond to different content areas, and a content area that displays relevant content based on the selected tab.

Common

Advanced

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.

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.

Preview

Common

Advanced

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.

Code

<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.

Preview

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.

Code

<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>

Used components

• Tab bar
  • Item