3.3 KiB
3.3 KiB
:: BASE_DOC ::
API
Picker Props
| name | type | default | description | required |
|---|---|---|---|---|
| auto-close | Boolean | true | - | N |
| cancel-btn | String / Boolean / Object | true | Typescript：boolean | string | ButtonProps |
N |
| confirm-btn | String / Boolean / Object | true | Typescript：boolean | string | ButtonProps，Button API Documents。see more ts definition |
N |
| header | Boolean / Slot | true | see more ts definition | N |
| keys | Object | - | Typescript：KeysType。see more ts definition |
N |
| title | String | '' | - | N |
| value | Array | - | Typescript：Array<PickerValue> type PickerValue = string | number。see more ts definition |
N |
| default-value | Array | undefined | uncontrolled property。Typescript：Array<PickerValue> type PickerValue = string | number。see more ts definition |
N |
| visible | Boolean | false | - | N |
Picker Events
| name | params | description |
|---|---|---|
| cancel | - | - |
| change | (value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> ) |
- |
| close | (trigger: TriggerSource) |
1.0.1。see more ts definition。type TriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn' |
| confirm | (value: Array<PickerValue>, label: string, columns: Array<{ column: number; index: number }> ) |
- |
| pick | (value: Array<PickerValue>, label: string, column: number, index: number) |
- |
PickerItem Props
| name | type | default | description | required |
|---|---|---|---|---|
| format | Function | - | Typescript：(option: PickerItemOption) => string |
N |
| options | Array | [] | Typescript：PickerItemOption[] interface PickerItemOption { label: string; value: string | number }。see more ts definition |
N |
CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
| Name | Default Value | Description |
|---|---|---|
| --td-picker-group-height | 400rpx | - |
| --td-picker-bg-color | @bg-color-container | - |
| --td-picker-border-radius | 24rpx | - |
| --td-picker-button-font-size | 32rpx | - |
| --td-picker-cancel-color | @font-gray-2 | - |
| --td-picker-confirm-color | @brand-color | - |
| --td-picker-indicator-bg-color | @bg-color-secondarycontainer | - |
| --td-picker-indicator-border-radius | 12rpx | - |
| --td-picker-mask-color-bottom | hsla(0, 0%, 100%, 0.4) | - |
| --td-picker-mask-color-top | hsla(0, 0%, 100%, 0.92) | - |
| --td-picker-title-color | @font-gray-1 | - |
| --td-picker-title-font-size | 36rpx | - |
| --td-picker-title-font-weight | 600 | - |
| --td-picker-title-line-height | 52rpx | - |
| --td-picker-toolbar-height | 116rpx | - |
| --td-picker-item-active-color | @font-gray-1 | - |
| --td-picker-item-color | @font-gray-2 | - |
| --td-picker-item-height | 80rpx | - |