IndexBar
Install
Usage
Basic Usage
Custom Index List
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 |
- |