IndexBar - Vant 4

IndexBar

🚀 Transform your long lists into navigable masterpieces! The IndexBar component brings alphabetical organization and lightning-fast positioning to your mobile interfaces.

📖 Intro

Create intuitive, indexed navigation for large datasets with smooth scrolling and sticky positioning. Perfect for contact lists, directories, and any content that benefits from alphabetical organization.

📦 Install

Get started with IndexBar by registering both IndexBar and IndexAnchor components globally. Refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { IndexBar } from'vant'; const app = createApp(); app.use(IndexBar); app.use(IndexAnchor);

🎨 Usage

🌟 Basic Usage

Create a smooth, alphabetical navigation experience with automatic index generation:

🎯 Custom Index List

Customize your navigation with numeric indices or any custom sequence that fits your data structure:

exportdefault { setup() { return { indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], }; }, };

🔧 API

🎛️ IndexBar Props

Configure your IndexBar with these comprehensive options:

Attribute	Description	Type	Default
index-list	Index List	*(string	number)[]*
z-index	z-index	*number	string*
sticky	Whether to enable anchor sticky top	boolean	true
sticky-offset-top	Anchor offset top when sticky	number	0
highlight-color	Index character highlight color	string	#1989fa

| teleport | Specifies a target element where IndexBar will be mounted | string | Element | - |

🎯 IndexAnchor Props

Define anchor points for your indexed content:

Attribute	Description	Type	Default
index	Index	*number	string*

📡 IndexBar Events

Stay connected with user interactions and navigation changes:

Event	Description	Arguments
select	Emitted when an index is selected	*index: number
change	Emitted when active index changed	*index: number

⚙️ IndexBar Methods

Programmatically control navigation with these powerful methods. Use ref to get IndexBar instance and call instance methods.

Name	Description	Attribute	Return value
scrollTo	scroll to target element	*index: number	string*

📝 Types

The component exports comprehensive type definitions for enhanced TypeScript development:

importtype { IndexBarProps, IndexAnchorProps, IndexBarInstance } from'vant';

IndexBarInstance is the type of component instance:

import { ref } from'vue'; importtype { IndexBarInstance } from'vant'; const indexBarRef = ref<IndexBarInstance>(); indexBarRef.value?.scrollTo('B');

🎰 IndexAnchor Slots

Customize anchor content with flexible slot options:

Name	Description
default	Anchor content, show index by default

🎨 Theming

🎯 CSS Variables

Transform your IndexBar's appearance with these comprehensive styling variables. Refer to ConfigProvider component for global theming options.

Name	Default Value	Description
--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)	-

📚 Related Docs

• List - List component for displaying indexed content
• Cell - Cell component for list items
• Sticky - Sticky positioning component
• Search - Search component for filtering lists
• Sidebar - Sidebar navigation component
• Tab - Tab navigation component
• ConfigProvider - Global configuration
• Lazyload - Lazy loading for large lists