/*! For license information please see 7681.8705a4c4.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["7681"],{64400:function(n,s,a){"use strict";a.r(s);var t=a("80681");let e=["innerHTML"];s.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

IndexBar

\n

Intro

\n

Used for indexed sorting display and quick positioning of lists.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { IndexBar } from 'vant';\n\nconst app = createApp();\napp.use(IndexBar);\napp.use(IndexAnchor);\n
\n

Usage

\n

Basic Usage

\n
<van-index-bar>\n  <van-index-anchor index="A" />\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n\n  <van-index-anchor index="B" />\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n\n  ...\n</van-index-bar>\n
\n

Custom Index List

\n
<van-index-bar :index-list="indexList">\n  <van-index-anchor index="1">Title 1</van-index-anchor>\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n\n  <van-index-anchor index="2">Title 2</van-index-anchor>\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n  <van-cell title="Text" />\n\n  ...\n</van-index-bar>\n
\n
export default {\n  setup() {\n    return {\n      indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n    };\n  },\n};\n
\n

API

\n

IndexBar Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
index-listIndex List(string | number)[]A-Z
z-indexz-indexnumber | string1
stickyWhether to enable anchor sticky topbooleantrue
sticky-offset-topAnchor offset top when stickynumber0
highlight-colorIndex character highlight colorstring#1989fa
teleportSpecifies a target element where IndexBar will be mountedstring | Element-
\n

IndexAnchor Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
indexIndexnumber | string-
\n

IndexBar Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
selectEmitted when an index is selectedindex: number | string
changeEmitted when active index changedindex: number | string
\n

IndexBar Methods

\n

Use ref to get IndexBar instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
scrollToscroll to target elementindex: number | string-
\n

Types

\n

The component exports the following type definitions:

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

IndexBarInstance is the type of component instance:

\n
import { ref } from 'vue';\nimport type { IndexBarInstance } from 'vant';\n\nconst indexBarRef = ref<IndexBarInstance>();\n\nindexBarRef.value?.scrollTo('B');\n
\n

IndexAnchor Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultAnchor content, show index by default
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-index-bar-sidebar-z-index2-
--van-index-bar-index-font-sizevar(--van-font-size-xs)-
--van-index-bar-index-line-heightvar(--van-line-height-xs)-
--van-index-bar-index-active-colorvar(--van-primary-color)-
--van-index-anchor-z-index1-
--van-index-anchor-padding0 var(--van-padding-md)-
--van-index-anchor-text-colorvar(--van-text-color)-
--van-index-anchor-font-weightvar(--van-font-bold)-
--van-index-anchor-font-sizevar(--van-font-size-md)-
--van-index-anchor-line-height32px-
--van-index-anchor-backgroundtransparent-
--van-index-anchor-sticky-text-colorvar(--van-primary-color)-
--van-index-anchor-sticky-backgroundvar(--van-background-2)-
\n
'},null,8,e))}}}]);