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

PropertiesInstructionstypeDefault
bodyHeightheight of scroll list bodynumber | string300
classNameclassname of wrapperstring''
footerBottom addonReactNode''
headerHead addonReactNode''
styleinline styleCSSProperties{}

ScrollItem

PropertiesInstructionstypeDefault
cycledWhether it is an infinite loop, effective only if the mode is "wheel"booleanfalse
classNameclassname of scroll itemstring''
listList contentItem Data[][]
motionWhether to start the scroll animationMotiontrue
onSelectSelect callback(data: ItemData) => voidNOOP
selectIndexIndex of selected itemsnumber0
styleInline styleCSSProperties{}
transformFor the Transformation of the selected item, the return value is displayed as a copy(value: any, text: string) => stringv = > v

ItemData

PropertiesInstructionstypeDefault
disabledWhether the item is prohibited or notboolean
textThe copy of each item.string
transformWhen 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) => stringv = > v
valueThe value of each itemany

Accessibility

ARIA

  • ScrollItem support aria-label, indicates the label of current column.
  • ScrollItem uses aria-disabled to indicate whether the item is disabled
  • ScrollItem uses aria-selected to indicate whether the item is selected

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED