Tab bar
The tab bar displays a row of navigation tabs, allowing users to switch between different sections or views within the interface. It groups multiple tab items together in a single bar and provides a consistent, easy-to-scan structure for navigating related content areas.
Props
is-pills?: boolean
If the tab bar should be rendered as pills.
Slots
default
The content of the tab bar.
Examples
Basic
A basic tab bar.
<template>
<FluxPane style="max-width: max-content">
<FluxPaneBody>
<FluxTabBar>
<FluxTabBarItem
label="Components"
:is-active="index == 0"
@click="index = 0"/>
<FluxTabBarItem
label="Dashboard"
:is-active="index == 1"
@click="index = 1"/>
<FluxTabBarItem
label="Internals"
:is-active="index == 2"
@click="index = 2"/>
</FluxTabBar>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Icon and label
A tab bar with both icons and labels.
<template>
<FluxPane style="max-width: max-content">
<FluxPaneBody>
<FluxTabBar>
<FluxTabBarItem
icon="cubes"
label="Components"
:is-active="index == 0"
@click="index = 0"/>
<FluxTabBarItem
icon="desktop"
label="Dashboard"
:is-active="index == 1"
@click="index = 1"/>
<FluxTabBarItem
icon="puzzle-piece"
label="Internals"
:is-active="index == 2"
@click="index = 2"/>
</FluxTabBar>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Pane
A tab bar inside a pane.
Flux packages
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>
<FluxPaneHeader
title="Flux packages"/>
<FluxTabBar>
<FluxTabBarItem
icon="cubes"
label="Components"
:is-active="index == 0"
@click="index = 0"/>
<FluxTabBarItem
icon="desktop"
label="Dashboard"
:is-active="index == 1"
@click="index = 1"/>
<FluxTabBarItem
icon="puzzle-piece"
label="Internals"
:is-active="index == 2"
@click="index = 2"/>
</FluxTabBar>
<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>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxPaneHeader, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Pills
A tab bar rendered as pills.
<template>
<FluxPane style="max-width: max-content">
<FluxPaneBody>
<FluxTabBar is-pills>
<FluxTabBarItem
label="Components"
:is-active="index == 0"
@click="index = 0"/>
<FluxTabBarItem
label="Dashboard"
:is-active="index == 1"
@click="index = 1"/>
<FluxTabBarItem
label="Internals"
:is-active="index == 2"
@click="index = 2"/>
</FluxTabBar>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Pills with icon and label
A pills tab bar with both icons and labels.
<template>
<FluxPane style="max-width: max-content">
<FluxPaneBody>
<FluxTabBar is-pills>
<FluxTabBarItem
icon="cubes"
label="Components"
:is-active="index == 0"
@click="index = 0"/>
<FluxTabBarItem
icon="desktop"
label="Dashboard"
:is-active="index == 1"
@click="index = 1"/>
<FluxTabBarItem
icon="puzzle-piece"
label="Internals"
:is-active="index == 2"
@click="index = 2"/>
</FluxTabBar>
</FluxPaneBody>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Pills in pane
A pills tab bar inside a pane.
Flux packages
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>
<FluxPaneHeader
title="Flux packages"/>
<FluxTabBar is-pills>
<FluxTabBarItem
icon="cubes"
label="Components"
:is-active="index == 0"
@click="index = 0"/>
<FluxTabBarItem
icon="desktop"
label="Dashboard"
:is-active="index == 1"
@click="index = 1"/>
<FluxTabBarItem
icon="puzzle-piece"
label="Internals"
:is-active="index == 2"
@click="index = 2"/>
</FluxTabBar>
<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>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxPane, FluxPaneBody, FluxPaneHeader, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>