vant/src/index-bar/README.md

IndexBar

Intro

Used for the index classification display and quick positioning of the list.

Install

Register component globally via app.use, 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

<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

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

IndexAnchor Slots

Name	Description
default	Anchor content, show index by default

Methods

Use ref to get IndexBar instance and call instance methods.

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

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@index-bar-sidebar-z-index	2	-
@index-bar-index-font-size	@font-size-xs	-
@index-bar-index-line-height	@line-height-xs	-
@index-bar-index-active-color	@red	-
@index-anchor-z-index	1	-
@index-anchor-padding	0 @padding-md	-
@index-anchor-text-color	@text-color	-
@index-anchor-font-weight	@font-weight-bold	-
@index-anchor-font-size	@font-size-md	-
@index-anchor-line-height	32px	-
@index-anchor-background-color	transparent	-
@index-anchor-sticky-text-color	@red	-
@index-anchor-sticky-background-color	@white	-