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.
Properties
animated | |
|---|---|
| Description | If
|
| Attribute | animated |
| Type | boolean |
| Default | true |
backdropDismiss | |
| Description | If |
| Attribute | backdrop-dismiss |
| Type | boolean |
| Default | true |
buttons | |
| Description | Array of buttons to be displayed at the top of the picker. |
| Type | PickerButton[] |
| Default | [] |
columns | |
| Description | Array of columns to be displayed in the picker. |
| Type | PickerColumn[] |
| Default | [] |
cssClass | |
| 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 |
duration | |
| Description | Number of milliseconds to wait before dismissing the picker. |
| Attribute | duration |
| Type | number |
| Default | 0 |
enterAnimation | |
| Description | Animation to use when the picker is presented. |
| Type | ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined |
keyboardClose | |
| Description | If |
| Attribute | keyboard-close |
| Type | boolean |
| Default | true |
leaveAnimation | |
| Description | Animation to use when the picker is dismissed. |
| Type | ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined |
mode | |
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" | "md" |
showBackdrop | |
| Description | If |
| Attribute | show-backdrop |
| Type | boolean |
| Default | true |
Events
| 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. |
Methods
dismiss | |
|---|---|
| Description | Dismiss the picker overlay after it has been presented. |
| Signature | dismiss(data?: any, role?: string | undefined) => Promise<boolean> |
getColumn | |
| Description | Get the column that matches the specified name. |
| Signature | getColumn(name: string) => Promise<PickerColumn | undefined> |
onDidDismiss | |
| Description | Returns a promise that resolves when the picker did dismiss. |
| Signature | onDidDismiss() => Promise<OverlayEventDetail<any>> |
onWillDismiss | |
| Description | Returns a promise that resolves when the picker will dismiss. |
| Signature | onWillDismiss() => Promise<OverlayEventDetail<any>> |
present | |
| Description | Present the picker overlay after it has been created. |
| Signature | present() => Promise<void> |
CSS Custom Properties
| Name | Description |
|---|---|
--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 |