ion-picker
A Picker displays one or more columns with options for users to choose from.
Prefix & Suffix Content
Use the prefix
and suffix
slots to add additional content to the picker.
Theming
CSS Variables
The picker highlight and fade can be customized using CSS variables on ion-picker
. Developers can customize the individual appearance of ion-picker-column-options
by targeting them directly and using host level styling.
Picker in Modal
Pickers can be displayed inside of overlays, such as ion-modal
to create a picker experience with confirmation or cancellation buttons.
Console
Console messages will appear here when logged from the example above.
Properties
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
Events
Name | Description |
---|---|
ionInputModeChange |
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--fade-background-rgb | Background of the gradient covering non-selected items in rgb format |
--highlight-background | Background of the picker highlight for the selected item |
--highlight-border-radius | Border radius of the picker highlight for the selected item |
Slots
No slots available for this component.