Install

import { createApp } from 'vue';
import { IndexBar } from 'vant';

const app = createApp();
app.use(IndexBar);
app.use(IndexAnchor);

Usage

Basic Usage

<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="Text" />
  <van-cell title="Text" />
  <van-cell title="Text" />

  <van-index-anchor index="B" />
  <van-cell title="Text" />
  <van-cell title="Text" />
  <van-cell title="Text" />

  ...
</van-index-bar>

Custom Index List

<van-index-bar :index-list="indexList">
  <van-index-anchor index="1">Title 1</van-index-anchor>
  <van-cell title="Text" />
  <van-cell title="Text" />
  <van-cell title="Text" />

  <van-index-anchor index="2">Title 2</van-index-anchor>
  <van-cell title="Text" />
  <van-cell title="Text" />
  <van-cell title="Text" />

  ...
</van-index-bar>

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

API

IndexBar Props

Attribute	Description	Type	Default
index-list	Index List	string[] \| number[]	`A-Z`
z-index	z-index	number \| string	`1`
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	`#ee0a24`
teleport `v3.0.19`	Specifies a target element where IndexBar will be mounted	string \| Element	-

IndexAnchor Props

Attribute	Description	Type	Default
index	Index	number \| string	-

IndexBar Events

Event	Description	Arguments
select	Emitted when an index is selected	index: number \| string
change	Emitted when active index changed	index: number \| string

IndexBar 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 the following type definitions:

import type { IndexBarProps, IndexAnchorProps, IndexBarInstance } from 'vant';

IndexBarInstance is the type of component instance:

import { ref } from 'vue';
import type { IndexBarInstance } from 'vant';

const indexBarRef = ref<IndexBarInstance>();

indexBarRef.value?.scrollTo('B');

IndexAnchor Slots

Name	Description
default	Anchor content, show index by default

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

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-danger-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-weight-bold)	-
--van-index-anchor-font-size	var(--van-font-size-md)	-
--van-index-anchor-line-height	32px	-
--van-index-anchor-background-color	transparent	-
--van-index-anchor-sticky-text-color	var(--van-danger-color)	-
--van-index-anchor-sticky-background-color	var(--van-background-color-light)	-

IndexBar

Intro