Tab bar item
The tab bar item represents an individual tab within the tab bar. Each item corresponds to a specific content view or section. When selected, it updates the displayed content accordingly, helping users understand where they are and switch between sections effortlessly.
WARNING
This component is best used within a Tab bar.
Props
type?: FluxPressableType
The type of the tab.
disabled?: boolean
If the tab is disabled.
icon?: FluxIconName
The icon of the tab.
is-active?: boolean
If the tab is active.
label?: string
The label of the tab.
tabindex?: string | number
The tabindex of the tab, works exactly the same as HTML. When set it overrides the automatic roving tab stop; otherwise the tab is tabbable when it is the active tab, or the first enabled tab when none is selected.
href?: string
This prop is enabled if the tab type is set to link. It's the same as the <a> HTML element.
rel?: string
This prop is enabled if the tab type is set to link. It's the same as the <a> HTML element.
target?: string
This prop is enabled if the tab type is set to link. It's the same as the <a> HTML element.
to?: FluxTo
This prop is enabled if the button's type is set to route. This integrates with Vue Router.
Emits
click: [MouseEvent]
Triggered when the tab is clicked.
mouseenter: [MouseEvent]
Triggered when the mouse enters the tab.
mouseleave: [MouseEvent]
Triggered when the mouse leaves the tab.
Slots
start
Content rendered before the icon and the label, such as an avatar or a status indicator.
end
Content rendered after the label, such as a badge with an unread count.
Examples
Basic
A basic tab bar item.
<template>
<FluxTabBar>
<FluxTabBarItem
icon="cubes"
label="Components"/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
</script>Pills
A tab bar item rendered as a pill.
<template>
<FluxTabBar is-pills>
<FluxTabBarItem
icon="cubes"
label="Components"/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
</script>Active tab
Mark the selected tab with is-active.
<template>
<FluxTabBar>
<FluxTabBarItem
icon="house"
label="Home"
is-active/>
<FluxTabBarItem
icon="chart-line"
label="Analytics"/>
<FluxTabBarItem
icon="gear"
label="Settings"/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
</script>Disabled tab
A tab bar with a disabled item that cannot be selected.
<template>
<FluxTabBar>
<FluxTabBarItem
icon="house"
label="Home"
is-active/>
<FluxTabBarItem
icon="chart-line"
label="Analytics"/>
<FluxTabBarItem
icon="gear"
label="Settings"
disabled/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
</script>Label only
Tab bar items can render just a label without an icon.
<template>
<FluxTabBar>
<FluxTabBarItem
label="Overview"
is-active/>
<FluxTabBarItem label="Activity"/>
<FluxTabBarItem label="Settings"/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
</script>Count badge
Show an unread or item count after the label using the end slot.
<template>
<FluxTabBar>
<FluxTabBarItem
icon="envelope"
:is-active="index == 0"
label="Inbox"
@click="index = 0">
<template #end>
<FluxBadge label="12"/>
</template>
</FluxTabBarItem>
<FluxTabBarItem
icon="file-lines"
:is-active="index == 1"
label="Drafts"
@click="index = 1">
<template #end>
<FluxBadge label="3"/>
</template>
</FluxTabBarItem>
<FluxTabBarItem
icon="paper-plane"
:is-active="index == 2"
label="Sent"
@click="index = 2"/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxBadge, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Avatar and status
Render an avatar with a status indicator before the label using the start slot.
<template>
<FluxTabBar>
<FluxTabBarItem
:is-active="index == 0"
label="Bas Milius"
@click="index = 0">
<template #start>
<FluxAvatar
alt="Bas Milius"
fallback-initials="BM"
:size="21"
status="success"/>
</template>
</FluxTabBarItem>
<FluxTabBarItem
:is-active="index == 1"
label="Anna de Vries"
@click="index = 1">
<template #start>
<FluxAvatar
alt="Anna de Vries"
fallback-initials="AV"
:size="21"
status="warning"/>
</template>
</FluxTabBarItem>
<FluxTabBarItem
:is-active="index == 2"
label="Tom Jansen"
@click="index = 2">
<template #start>
<FluxAvatar
alt="Tom Jansen"
fallback-initials="TJ"
:size="21"
status="gray"/>
</template>
</FluxTabBarItem>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxAvatar, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>Validation state
Flag a tab that contains errors. The slot may be filled conditionally.
<template>
<FluxTabBar>
<FluxTabBarItem
icon="user"
:is-active="index == 0"
label="Profile"
@click="index = 0"/>
<FluxTabBarItem
icon="lock"
:is-active="index == 1"
label="Security"
@click="index = 1">
<template #end>
<FluxBadge
v-if="securityErrors > 0"
color="danger"
icon="circle-exclamation"
:label="String(securityErrors)"/>
</template>
</FluxTabBarItem>
<FluxTabBarItem
icon="gear"
:is-active="index == 2"
label="Preferences"
@click="index = 2"/>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxBadge, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
const securityErrors = ref(2);
</script>Start and end slots
Both slots combined in a single tab.
<template>
<FluxTabBar>
<FluxTabBarItem
:is-active="index == 0"
label="Bas Milius"
@click="index = 0">
<template #start>
<FluxAvatar
alt="Bas Milius"
fallback-initials="BM"
:size="21"
status="success"/>
</template>
<template #end>
<FluxBadge label="8"/>
</template>
</FluxTabBarItem>
<FluxTabBarItem
:is-active="index == 1"
label="Anna de Vries"
@click="index = 1">
<template #start>
<FluxAvatar
alt="Anna de Vries"
fallback-initials="AV"
:size="21"
status="warning"/>
</template>
<template #end>
<FluxBadge label="2"/>
</template>
</FluxTabBarItem>
</FluxTabBar>
</template>
<script
setup
lang="ts">
import { FluxAvatar, FluxBadge, FluxTabBar, FluxTabBarItem } from '@flux-ui/components';
import { ref } from 'vue';
const index = ref(0);
</script>