ion-picker
A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
| Description | If true, the picker will animate. |
| Attribute | animated |
| Type | boolean |
| Default | true |
| Description | If true, the picker will be dismissed when the backdrop is clicked. |
| Attribute | backdrop-dismiss |
| Type | boolean |
| Default | true |
| Description | Array of buttons to be displayed at the top of the picker. |
| Attribute | undefined |
| Type | PickerButton[] |
| Default | [] |
| Description | Array of columns to be displayed in the picker. |
| Attribute | undefined |
| Type | PickerColumn[] |
| Default | [] |
| Description | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. |
| Attribute | css-class |
| Type | string ｜ string[] ｜ undefined |
| Default | undefined |
| Description | Number of milliseconds to wait before dismissing the picker. |
| Attribute | duration |
| Type | number |
| Default | 0 |
| Description | Animation to use when the picker is presented. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | Additional attributes to pass to the picker. |
| Attribute | undefined |
| Type | PickerAttributes ｜ undefined |
| Default | undefined |
| Description | If true, the keyboard will be automatically dismissed when the overlay is presented. |
| Attribute | keyboard-close |
| Type | boolean |
| Default | true |
| Description | Animation to use when the picker is dismissed. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | If true, a backdrop will be displayed behind the picker. |
| Attribute | show-backdrop |
| Type | boolean |
| Default | true |
| Name | Description |
|---|
ionPickerDidDismiss | Emitted after the picker has dismissed. |
ionPickerDidPresent | Emitted after the picker has presented. |
ionPickerWillDismiss | Emitted before the picker has dismissed. |
ionPickerWillPresent | Emitted before the picker has presented. |
| Description | Dismiss the picker overlay after it has been presented. |
| Signature | dismiss(data?: any, role?: string ｜ undefined) => Promise<boolean> |
| Description | Get the column that matches the specified name. |
| Signature | getColumn(name: string) => Promise<PickerColumn ｜ undefined> |
| Description | Returns a promise that resolves when the picker did dismiss. |
| Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | Returns a promise that resolves when the picker will dismiss. |
| Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | Present the picker overlay after it has been created. |
| Signature | present() => Promise<void> |
No CSS shadow parts available for this component.
| Name | Description |
|---|
--backdrop-opacity | Opacity of the backdrop |
--background | Background of the picker |
--background-rgb | Background of the picker in rgb format |
--border-color | Border color of the picker |
--border-radius | Border radius of the picker |
--border-style | Border style of the picker |
--border-width | Border width of the picker |
--height | Height of the picker |
--max-height | Maximum height of the picker |
--max-width | Maximum width of the picker |
--min-height | Minimum height of the picker |
--min-width | Minimum width of the picker |
--width | Width of the picker |
No slots available for this component.