IndexBar

Intro

Used for indexed sorting display and quick positioning of lists.

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`

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`	-