Sidebar サイドバー - Vant 4

📚 Sidebar サイドバー

🎯 紹介

ページの側面にグループ化されたナビゲーションリストを表示するコンポーネントです。選択項目の双方向バインディング、バッジ表示、無効状態をサポートし、商品分類や設定メニューなどのシーンで使用されます。

📦 導入

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

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

🎯 コード例

🔧 基本用法

v-model で現在の選択インデックスをバインドし、選択状態を管理します。

<template>
  <van-sidebar v-model="active">
    <van-sidebar-item title="ラベル名" />
    <van-sidebar-item title="ラベル名" />
    <van-sidebar-item title="ラベル名" />
  </van-sidebar>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
</script>

🏷️ バッジ表示

dot 属性で右上に赤いドットを表示、badge 属性で右上に数値バッジを表示できます。重要情報をひと目で伝えます。

<template>
  <van-sidebar v-model="active">
    <van-sidebar-item title="ラベル名" dot />
    <van-sidebar-item title="ラベル名" badge="5" />
    <van-sidebar-item title="ラベル名" badge="20" />
  </van-sidebar>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
</script>

🚫 無効な項目

disabled 属性で項目を無効化できます。グレー表示でクリック不可を明確にします。

<template>
  <van-sidebar v-model="active">
    <van-sidebar-item title="タブ名" />
    <van-sidebar-item title="タブ名" disabled />
    <van-sidebar-item title="タブ名" />
  </van-sidebar>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const active = ref(0);
    return { active };
  },
};
</script>

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

change イベントでナビゲーション切り替えを監視し、リッチなインタラクションを実現します。

<template>
  <van-sidebar v-model="active" @change="onChange">
    <van-sidebar-item title="标签名称" />
    <van-sidebar-item title="标签名称" />
    <van-sidebar-item title="标签名称" />
  </van-sidebar>
</template>

<script>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const active = ref(0);
    const onChange = (index) => showToast(`タブ ${index + 1}に切り替え`);
    return { active, onChange };
  },
};
</script>

📋 API

🎛️ Sidebar Props

属性名	説明	型	デフォルト
v-model	🎯 現在の選択インデックス	number	0
disabled	🚫 全ての項目を無効化するか	boolean	false

🎪 Sidebar Events

イベント名	説明	コールバック引数
change	🔄 ナビゲーション項目の切り替え時に発火	index: number

🎨 SidebarItem Props

属性名	説明	型	デフォルト
title	📝 ナビゲーション項目のタイトル	string	''
dot	🔴 右上に赤いドットを表示するか	boolean	false
badge	🏷️ 右上のバッジコンテンツ	number | string	-
badge-props	⚙️ カスタムバッジのプロパティ（Badge の props を透過）	BadgeProps	-
disabled	🚫 この項目を無効化するか	boolean	false
url	🔗 クリック後に遷移する URL	string	-
to	🧭 クリック後の遷移ルート（Vue Router の to と同等）	string | object	-
replace	🔄 遷移時に現在の履歴を置き換えるか	boolean	false

🎪 SidebarItem Events

イベント名	説明	コールバック引数
click	👆 クリック時に発火	index: number

🎭 SidebarItem Slots

名称	説明
title	🎨 カスタムタイトルコンテンツ

📘 タイプ定義

コンポーネントは以下のタイプ定義をエクスポートし、TypeScript プロジェクトでの使用を容易にします：

import type { SidebarProps, SidebarItemProps } from 'vant';

🎨 テーマカスタマイズ

🎛️ スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。

名称	デフォルト値	説明
--van-sidebar-width	80px	📏 サイドバーの幅
--van-sidebar-font-size	var(--van-font-size-md)	📝 文字サイズ
--van-sidebar-line-height	var(--van-line-height-md)	📏 文字の行の高さ
--van-sidebar-text-color	var(--van-text-color)	🎨 文字色
--van-sidebar-disabled-text-color	var(--van-text-color-3)	🎨 無効状態の文字色
--van-sidebar-padding	20px 12px	📏 内側余白
--van-sidebar-active-color	var(--van-active-color)	🎨 アクティブ状態の背景色
--van-sidebar-background-color	var(--van-background-color)	🎨 背景色
--van-sidebar-selected-font-weight	var(--van-font-weight-bold)	📝 選択項目の文字の太さ
--van-sidebar-selected-text-color	var(--van-text-color)	🎨 選択項目の文字色
--van-sidebar-selected-border-width	3px	📏 選択項目の枠線の幅
--van-sidebar-selected-border-color	var(--van-danger-color)	🎨 選択項目の枠線の色
--van-sidebar-selected-background-color	var(--van-background-color-light)	🎨 選択項目の背景色

📚 関連ドキュメント

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

• Tab タブ - 📑 水平タブナビゲーション。コンテンツ切り替えに最適
• Tabbar タブバー - 📱 下部タブバー。モバイルの主要ナビゲーションに最適
• TreeSelect ツリーセレクト - 🌳 ツリー型分類セレクター。複数レベルの分類表示をサポート

🎨 表示コンポーネント

• Badge バッジ - 🏷️ ナビゲーション項目に数値や状態を表示
• Cell セル - 📱 リスト項目コンポーネント。カスタムナビゲーションに利用
• Icon アイコン - 🎨 豊富なアイコンで視覚的識別を提供

🔧 ツールコンポーネント

• ConfigProvider グローバル設定 - ⚙️ グローバル設定プロバイダ。テーマスタイルを統一管理
• Popup ポップアップ - 🎪 ポップアップコンテナ。ドロワー型サイドバーに利用