TabBar

TxTabBar renders app-style bottom navigation. It manages a v-model value, exposes tab semantics for each item, supports badges, and can reserve the device safe-area inset when it is fixed to the viewport bottom.

Basic Usage

TabBar

Demo will load when visible.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('home')

const items = [
  { value: 'home', label: 'Home', iconClass: 'i-carbon-home' },
  { value: 'search', label: 'Search', iconClass: 'i-carbon-search', badge: 3 },
  { value: 'profile', label: 'Me', iconClass: 'i-carbon-user' },
]
</script>

<template>
  <div style="width: 360px; height: 220px; border: 1px solid var(--tx-border-color); border-radius: 12px; overflow: hidden; position: relative;">
    <div style="padding: 16px; color: var(--tx-text-color-secondary);">
      Active: {{ value }}
    </div>

    <TxTabBar v-model="value" :items="items" />
  </div>
</template>

API

Props

Prop	Type	Default	Description
`modelValue`	`string \| number`	`''`	Active tab value used by `v-model`.
`items`	`TabBarItem[]`	`[]`	Tabs rendered from left to right.
`fixed`	`boolean`	`true`	Fixes the bar to the bottom of the viewport. Disable it when the bar lives inside a framed preview or custom layout.
`safeAreaBottom`	`boolean`	`true`	Adds an `env(safe-area-inset-bottom)` spacer below the tab row.
`disabled`	`boolean`	`false`	Disables all tab buttons and suppresses value updates.
`zIndex`	`number`	`2000`	CSS z-index written to `--tx-tab-bar-z-index`.

TabBarItem

Field	Type	Description
`value`	`string \| number`	Value emitted when the tab is selected.
`label`	`string`	Visible tab label.
`iconClass`	`string`	Optional icon class rendered above the label.
`badge`	`string \| number`	Optional badge displayed on the icon area. Empty values are hidden.
`disabled`	`boolean`	Disables only this tab item.

Events

Event	Params	Description
`update:modelValue`	`(value)`	Emitted with the picked item value.
`change`	`(value)`	Mirrors the picked value for change listeners.