Tab

A tab represents a single selectable option within a tabs interface. Each tab is labeled to indicate the content it corresponds to, and selecting it updates the view to display the associated content area.

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.

WARNING

This component should be used within Tabs. The icon and label prop are not rendered without this component.

Props

icon?: FluxIconName
The icon of the tab.

label?: string
The label of the tab.

Slots

default
The content of the tab.

Examples

Basic

A basic tab.

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>
        <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>
    </FluxPane>
</template>

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