Show · ScrollList
ScrollList
Scroll through the list.
Demos
How to import
Basic Usage
The scrolling list provides a scrolling selection mode similar to the IOS operating system, while supporting scrolling to the specified window location selection and click selection.
API Reference
ScrollList
Properties | Instructions | type | Default |
---|---|---|---|
bodyHeight | height of scroll list body | number | string | 300 |
className | classname of wrapper | string | '' |
footer | Bottom addon | ReactNode | '' |
header | Head addon | ReactNode | '' |
style | inline style | CSSProperties | {} |
ScrollItem
Properties | Instructions | type | Default |
---|---|---|---|
cycled | Whether it is an infinite loop, effective only if the mode is "wheel" | boolean | false |
className | classname of scroll item | string | '' |
list | List content | Item Data[] | [] |
mode | mode selection | "normal" | "wheel" | "wheel" |
motion | Whether to start the scroll animation | Motion | true |
onSelect | Select callback | (data: ItemData) => void | NOOP |
selectIndex | Index of selected items | number | 0 |
style | Inline style | CSSProperties | {} |
transform | For the Transformation of the selected item, the return value is displayed as a copy | (value: any, text: string) => string | v = > v |
ItemData
Properties | Instructions | type | Default |
---|---|---|---|
disabled | Whether the item is prohibited or not | boolean | |
text | The copy of each item. | string | |
transform | When the transformation is in the selected state, the return value is displayed as a copy, and if the ScrollItem component is passed at the same time, the transform method in ItemData will be selected first. | (value: any, text: string) => string | v = > v |
value | The value of each item | any |
Accessibility
ARIA
ScrollItem
supportaria-label
, indicates the label of current column.ScrollItem
usesaria-disabled
to indicate whether the item is disabledScrollItem
usesaria-selected
to indicate whether the item is selected