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.

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.

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>

Icon and label

A tabs pane with both icons and labels.

Preview

Components

Dashboard

Internals

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

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

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

Preview

Components

Dashboard

Internals

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

• Tab bar
  • Item