Tabbar 标签栏 - Vant 4

Tabbar タブバー 📱

紹介 ✨

ボトムナビゲーションはモバイルアプリの定番！🎯 画面下部に固定され、ページ間を簡単に切り替えられます。スマホの Dock のように主要機能への入口を提供。アイコン、バッジ、カスタムスタイルなど多機能で、現代的なアプリに欠かせないコンポーネントです。

取り込み

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; import { Tabbar, TabbarItem } from'vant'; const app = createApp(); app.use(Tabbar); app.use(TabbarItem);

コード例 🚀

基本的な使い方 📋

最も簡単な使い方！🎉 v-model で選択中のタブのインデックス/名前をバインドし、変更で切り替え。各タブはアイコンと文字を持ち、クリックでページを切り替えます。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">タブ</van-tabbar-item>
  <van-tabbar-item icon="search">タブ</van-tabbar-item>
  <van-tabbar-item icon="friends-o">タブ</van-tabbar-item>
  <van-tabbar-item icon="setting-o">タブ</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};

名前でマッチング 🏷️

より意味のある管理方法！✨ タブに name を指定すると、v-model の値はその name になります。インデックスを覚える必要がなく、読みやすいコードに。

<van-tabbar v-model="active">
  <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
  <van-tabbar-item name="friends" icon="friends-o">朋友</van-tabbar-item>
  <van-tabbar-item name="setting" icon="setting-o">设置</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref('home');
    return { active };
  },
};

バッジ表示 🔴

重要情報を見逃さない！💡 dot で右上に赤いドット、badge で数字バッジを表示。未読数の表示に最適です。

<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">タブ</van-tabbar-item>
  <van-tabbar-item icon="search" dot>タブ</van-tabbar-item>
  <van-tabbar-item icon="friends-o" badge="5">タブ</van-tabbar-item>
  <van-tabbar-item icon="setting-o" badge="20">タブ</van-tabbar-item>
</van-tabbar>

カスタムアイコン 🎨

独自のビジュアル体験を！🌟 icon スロットでアイコンをカスタマイズし、選択状態に応じて切り替え可能です。

<van-tabbar v-model="active">
  <van-tabbar-item badge="3">
    <span>自定义</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="search">タブ</van-tabbar-item>
  <van-tabbar-item icon="setting-o">タブ</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactive: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
    return { icon, active };
  },
};

カスタムカラー 🌈

タブバーを個性化！🎨 active-color で選択色、inactive-color で非選択色を設定し、テーマに溶け込みます。

<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
  <van-tabbar-item icon="home-o">タブ</van-tabbar-item>
  <van-tabbar-item icon="search">タブ</van-tabbar-item>
  <van-tabbar-item icon="friends-o">タブ</van-tabbar-item>
  <van-tabbar-item icon="setting-o">タブ</van-tabbar-item>
</van-tabbar>

切り替えイベントの監視 👂

ユーザー操作に即応！⚡ change イベントで選択タブの変化を監視し、データ読み込みや統計処理などを実行できます。

<van-tabbar v-model="active" @change="onChange">
  <van-tabbar-item icon="home-o">タブ1</van-tabbar-item>
    <van-tabbar-item icon="search">タブ2</van-tabbar-item>
    <van-tabbar-item icon="friends-o">タブ3</van-tabbar-item>
    <van-tabbar-item icon="setting-o">タブ4</van-tabbar-item>
</van-tabbar>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => showToast(`タブ ${index}`);
    return { active, onChange };
  },
};

ルーターモード 🛣️

Vue Router と完全統合！🚀 ルーターモードではページパスと to を一致させ、自動で該当タブを選択します。SPA のナビゲーション体験を実現。

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="home-o">
    首页
  </van-tabbar-item>
  <van-tabbar-item replace to="/search" icon="search">
    搜索
  </van-tabbar-item>
</van-tabbar>

API 📖

Tabbar Props

パラメータ	説明	型	デフォルト
v-model	🎯 選択中タブの名前またはインデックス	number | string	0
fixed	📌 下部に固定	boolean	true
border	🖼️ 外枠を表示	boolean	true
z-index	📏 z-index	number | string	1
active-color	🌟 選択色	string	#1989fa
inactive-color	🌫️ 非選択色	string	#7d7e80
route	🛣️ ルーターモード	boolean	false
placeholder	📱 固定時に同高さのプレースホルダを生成	boolean	false
safe-area-inset-bottom	🛡️ セーフエリア下部対応	boolean	false
before-change	⚡ 切り替え前のコールバック（false で中止、Promise 可）	(name: number | string) => boolean | Promise<boolean>	-

Tabbar Events

イベント名	説明	コールバック引数
change	🔄 タブ切り替え時に発火	active: number | string

TabbarItem Props

パラメータ	説明	型	デフォルト
name	🏷️ タブ名（識別子）	number | string	タブのインデックス
icon	🎨 アイコン名または画像 URL（Icon の name と同等）	string	-
icon-prefix	🔧 アイコンクラス接頭辞（Icon の class-prefix と同等）	string	van-icon
dot	🔴 右上に赤いドットを表示	boolean	false
badge	🏆 右上バッジの内容	number | string	-
badge-props	⚙️ バッジの属性（Badge に透過）	BadgeProps	-
url	🔗 クリック時のリンク先	string	-
to	🛣️ クリック時の遷移先（Vue Router の to）	string | object	-
replace	🔄 遷移時に履歴を置き換え	boolean	false

TabbarItem Slots

名前	説明	引数
icon	🎨 カスタムアイコン	active: boolean

型定義 📝

TypeScript プロジェクト向けに以下の型定義を提供：

import type { TabbarProps, TabbarItemProps } from 'vant';

テーマカスタマイズ 🎨

スタイル変数

以下の CSS 変数でスタイルをカスタマイズできます。詳しくは ConfigProvider コンポーネント。

名称	デフォルト	説明
--van-tabbar-height	50px	📏 タブバー高さ
--van-tabbar-z-index	1	📐 タブバーのレイヤー
--van-tabbar-background	var(--van-background-2)	🎭 背景色
--van-tabbar-item-font-size	var(--van-font-size-sm)	📝 文字サイズ
--van-tabbar-item-text-color	var(--van-text-color)	🖋️ 文字色
--van-tabbar-item-active-color	var(--van-primary-color)	✨ アクティブ色
--van-tabbar-item-active-background	var(--van-background-2)	🌟 アクティブ背景色
--van-tabbar-item-line-height	1	📐 行の高さ
--van-tabbar-item-icon-size	22px	🎨 アイコンサイズ
--van-tabbar-item-icon-margin-bottom	var(--van-padding-base)	📏 アイコン下余白

関連ドキュメント 📚

ナビゲーションコンポーネント 🧭

• Tab タブ - コンテンツ切り替え（Tabbar と併用）
• NavBar ナビバー - ページ上部のナビゲーション
• Sidebar サイドバー - 多階層に適したサイドナビ
• IndexBar インデックスバー - アルファベット索引

表示コンポーネント 📱

• Badge バッジ - 数字や状態の表示
• Icon アイコン - Tabbar のアイコン基盤
• NoticeBar 通知バー - メッセージ表示

フィードバックコンポーネント 💬

• Toast トースト - 操作フィードバック
• Dialog ダイアログ - 重要情報の確認

ツールコンポーネント 🔧

• ConfigProvider グローバル設定 - テーマ設定