Index Bar
The section index of a phone list: a column of letters at the trailing edge that jumps to a section under the finger, as the iOS section index does. Desktop lists have no index, so an index bar never renders from 768px up.
import { IndexBar } from "@plexui/ui/components/IndexBar";An index bar takes people through a long list that is sorted by its titles, such as countries or contacts, as the iOS section index does: a letter for each section down the trailing edge, and a press or a drag on a letter shows its section. Give a list one only when it is long and its sections are its letters. A desktop list has no index, so the bar renders under 768px only.
Examples
The example shows the phone view.
Overview
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
Y
Z
API
IndexBar
| Prop | Type | Default | Description |
|---|---|---|---|
items | string[] | — | The titles of the sections, in order: usually letters, such as A to Z and # |
onSelect | (item: string, index: number) => void | — | Called with the title and the index of the section to show: on a press, on each new letter while dragging, and from the keys |
id | string | — | The id of the index bar |
aria-label | string | "Section index" | Name of the index bar |
aria-controls | string | — | The id of the list the index scrolls |
onFocus | (event: FocusEvent) => void | — | Called when the index bar gains focus |
onBlur | (event: FocusEvent) => void | — | Called when the index bar loses focus |
className | string | — | CSS classes applied to the strip of the index bar |
The bar is one stop for the Tab key: a vertical slider named Section index, read as the letter of the current section, as the iOS section index is one adjustable element for VoiceOver. Down and Up, or Right and Left, move one section; Home and End go to the first and the last; Enter or Space shows the current section again. The letters themselves are hidden from assistive technology. While a pointer presses the bar, it has data-pressed.
Styling
IndexBar reads these component tokens. Override them at any scope to restyle it:
--index-bar-width,--index-bar-inset-inline-end: the column of letters and its space from the trailing edge (default16px,0px)--index-bar-font-size,--index-bar-line-height,--index-bar-font-weight: the letters and the space from one to the next (default11px,14px, medium)--index-bar-color: the letters (defaultvar(--color-text-info))--index-bar-target-width: how far in from the edge a press reaches the bar (default30px)