IndexBar インデックスバー - Vant 4
📑 IndexBar インデックスバー
🎯 紹介
IndexBar コンポーネントは、親切な「ナビゲーションアシスタント」🧭 のようなものです！長いリストに高速な位置特定機能を提供し、ユーザーは辞書をめくるように簡単に目的のコンテンツを見つけることができます。連絡先リスト、都市リスト、製品カテゴリーなど、どんな場面でもユーザーにスムーズな閲覧体験を提供し、果てしないスクロールの苦労から解放します！
📦 導入
以下の方法でコンポーネントをグローバルに登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。
js
import { createApp } from'vue'; import { IndexBar, IndexAnchor } from'vant'; const app = createApp(); app.use(IndexBar); app.use(IndexAnchor);🚀 コードサンプル
🔧 基本的な使い方
インデックスバーをクリックすると、対応する IndexAnchor アンカーの位置に自動的にジャンプします。まるで瞬間移動のように便利です！✨
html
🎨 カスタムインデックスリスト
index-list 属性を使用して、表示するインデックス文字のリストをカスタマイズできます。インデックスバーをあなた専用のナビゲーションツールに変えましょう！数字、アルファベット、特殊記号など、どんな文字でも簡単に対応できます。
html
js
exportdefault { setup() { return { indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], }; }, };API
IndexBar Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| index-list | インデックス文字のリスト | (string | number)[] | A-Z |
| z-index | z-index レイヤー | number | string | 1 |
| sticky | アンカーの自動スティッキー機能を有効にするかどうか | boolean | true |
| sticky-offset-top | アンカーが自動的にスティッキーになるときの上部からの距離 | number | 0 |
| highlight-color | インデックス文字の強調表示色 | string | #1989fa |
| teleport | インデックスバーのマウント先ノードを指定 | string | Element | - |
IndexAnchor Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| index | インデックス文字 | number | string | - |
IndexBar Events
| イベント名 | 説明 | コールバックパラメータ |
|---|---|---|
| select | インデックスバーの文字をクリックしたときに発火 | index: number | string |
| change | 現在の強調表示されているインデックス文字が変わったときに発火 | index: number | string |
IndexBar メソッド
ref を使用して IndexBar インスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細はコンポーネントインスタンスメソッドを参照してください。
| メソッド名 | 説明 | パラメータ | 戻り値 |
|---|---|---|---|
| scrollTo | 指定したアンカーまでスクロール | index: number | string | - |
型定義
コンポーネントは以下の型定義をエクスポートしています：
ts
importtype { IndexBarProps, IndexAnchorProps, IndexBarInstance } from'vant';IndexBarInstance はコンポーネントインスタンスの型で、以下のように使用します：
ts
import { ref } from'vue'; importtype { IndexBarInstance } from'vant'; const indexBarRef = ref<IndexBarInstance>(); indexBarRef.value?.scrollTo('B');IndexAnchor Slots
| 名前 | 説明 |
|---|---|
| default | アンカー位置に表示されるコンテンツ。デフォルトはインデックス文字 |
テーマカスタマイズ
スタイル変数
コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名前 | デフォルト値 | 説明 |
|---|---|---|
| --van-index-bar-sidebar-z-index | 2 | - |
| --van-index-bar-index-font-size | var(--van-font-size-xs) | - |
| --van-index-bar-index-line-height | var(--van-line-height-xs) | - |
| --van-index-bar-index-active-color | var(--van-primary-color) | - |
| --van-index-anchor-z-index | 1 | - |
| --van-index-anchor-padding | 0 var(--van-padding-md) | - |
| --van-index-anchor-text-color | var(--van-text-color) | - |
| --van-index-anchor-font-weight | var(--van-font-bold) | - |
| --van-index-anchor-font-size | var(--van-font-size-md) | - |
| --van-index-anchor-line-height | 32px | - |
| --van-index-anchor-background | transparent | - |
| --van-index-anchor-sticky-text-color | var(--van-primary-color) | - |
| --van-index-anchor-sticky-background | var(--van-background-2) | - |
📚 関連ドキュメント
📋 リストコンポーネント
- List リスト - リストコンポーネント。インデックスバーと完璧に組み合わせるデータ表示ツール
- Cell セル - セルコンポーネント。リストアイテムを構築する基本コンポーネント
- ContactList 連絡先リスト - 連絡先リストコンポーネント。インデックスバーの代表的な使用シナリオ
🎯 ナビゲーションコンポーネント
- NavBar ナビゲーションバー - ナビゲーションバーコンポーネント。ページ上部のナビゲーション
- Tabbar タブバー - タブバーコンポーネント。下部ナビゲーション
- Sidebar サイドバーナビゲーション - サイドバーナビゲーションコンポーネント。別のナビゲーション方法
🔍 検索と位置特定
- Search 検索 - 検索コンポーネント。コンテンツを素早く見つけるための別の方法
- Sticky スティッキーポジショニング - スティッキーポジショニングコンポーネント。吸い付き効果の中核
- BackTop ページトップに戻る - ページトップに戻るコンポーネント。長いリストの親切なアシスタント
🎨 デザインコンポーネント
- ConfigProvider グローバル設定 - グローバル設定コンポーネント。テーマスタイルを統一的に管理
- Locale 国際化 - 国際化コンポーネント。多言語サポート
🛠️ 開発ガイド
- Advanced Usage 高度な使い方 - 高度な使い方ガイド。コンポーネントインスタンスメソッドの詳細
- Theme テーマカスタマイズ - テーマカスタマイズガイド。あなただけの視覚スタイルを作りましょう