Flux

Appearance

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.

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.

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>

Used components ​