ion-picker

Contents

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 true, the picker will animate.

Attribute animated
Type boolean

backdropDismiss

Description

If true, the picker will be dismissed when the backdrop is clicked.

Attribute backdrop-dismiss
Type boolean

buttons

Description

Array of buttons to be displayed at the top of the picker.

Type PickerButton[]

columns

Description

Array of columns to be displayed in the picker.

Type PickerColumn[]

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

enterAnimation

Description

Animation to use when the picker is presented.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

keyboardClose

Description

If true, the keyboard will be automatically dismissed when the overlay is presented.

Attribute keyboard-close
Type boolean

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 true, a backdrop will be displayed behind the picker.

Attribute show-backdrop
Type boolean

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

Returns the column the 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