Press UI

# IndexBar

Index classification display and quick positioning for lists.

# Code Demo

# Basic usage

When the index bar is clicked, it will automatically jump to the corresponding IndexAnchor anchor position.

<press-index-bar>
   <div>
     <press-index-anchor index="A" />
     <press-cell title="text" />
     <press-cell title="text" />
     <press-cell title="text" />
   </div>

   <div>
     <press-index-anchor index="B" />
     <press-cell title="text" />
     <press-cell title="text" />
     <press-cell title="text" />
   </div>

   ...
</press-index-bar>

# Custom index list

The list of index characters displayed can be customized through the index-list attribute.

<press-index-bar :index-list="indexList">
   <div>
     <press-index-anchor index="1">Title 1</press-index-anchor>
     <press-cell title="text" />
     <press-cell title="text" />
     <press-cell title="text" />
   </div>

   <div>
     <press-index-anchor index="2">Header 2</press-index-anchor>
     <press-cell title="text" />
     <press-cell title="text" />
     <press-cell title="text" />
   </div>

   ...
</press-index-bar>

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

# API

# IndexBar Props

| Parameter | Description | Type | Default | Version | | --------- | ----------- | ---- | ------- | ------- || | index-list | index character list | string[] | number[] | A-Z | - | | z-index | z-index level | number | 1 | - | | sticky | Whether to enable the anchor point to automatically stick to the ceiling | boolean | true | - | | sticky-offset-top | The distance from the top when the anchor point automatically sticks to the top | number | 0 | - | | highlight-color | index character highlight color | string | #07c160 | - |

# IndexAnchor Props

Parameter Description Type Default Version
use-slot whether to use slot for custom content boolean false -
index index character string | number - -

# IndexBar Events

Event Name Description Callback Parameters
select trigger when a character is selected index: index character

# IndexAnchor Slots

Name Description
- Display content at the anchor point, the default is the index character

# Theme customization

--index-bar-index-font-size：
--index-bar-index-line-height：
横屏

← NavBar →