Picker
pickerSelects values through one or more scroll-snap wheel columns.
Usage
Single column selection
Single row roller, uncontrolled use defaultValue to set the initial item.
<Picker columns={[fruits]} defaultValue={["orange"]} />Multi-column linkage
columns passes multiple columns, that is, multiple scroll wheels (such as hours:minutes), and value is an array of selected values for each column.
<Picker columns={[hours, minutes]} defaultValue={["9", "30"]} />Number of visible lines
visibleCount controls the window height (an odd number is recommended), and itemHeight controls the row height.
<Picker columns={[fruits]} visibleCount={3} itemHeight={36} />When to Use
Use it on mobile to select one or more columns of discrete values, such as hour and minute or province, city, and district, with an iOS-style wheel interaction. Use ActionSheet for a simple list of actions; Picker is commonly placed inside an action sheet or bottom drawer.
Import
import { Picker } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
columns * | PickerColumn[] | — | Configuration of each column (see below) |
value | string[] | — | Array of selected values in each column (controlled) |
defaultValue | string[] | First item in each column | Initial value in uncontrolled mode |
visibleCount | number | 5 | Number of visible lines (odd number recommended) |
itemHeight | number | 40 | row height px |
className | string | — | — |
PickerColumn: options: PickerOption[] · flex?: number (column flex ratio, default 1).
PickerOption: label: ReactNode · value: string.
Events
| Event | Type | Description |
|---|---|---|
onChange | (value: string[], columnIndex: number) => void | Called after a column settles, with the complete value array and changed column index |
Usage Guidelines
value/defaultValueis a string array, each item corresponds to a column, and the value must match avalueof theoptionsin the column; the number of columns is consistent with the length ofcolumns.onChangefires only after scrolling settles and includes the changed column index. Highlighting and centering update immediately, but the callback is not emitted on every frame.
Related
TabBar · Fab · ActionSheet · SwipeAction · PullToRefresh · SafeArea