A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://ionicframework.com/docs/api/picker below:

Website Navigation


Display a list of options in columns

ion-picker shadow

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.

Accessibility​ Screen Readers​

Picker supports navigation using a screen reader by implementing the slider role on each Picker Column. The following gestures can be used to navigate the Picker.

Gesture Function Swipe Left Move focus to the previous Picker Column. Swipe Right Move focus to the next Picker Column. Swipe Up Select the next option in the Picker Column. Swipe Down Select the previous option in the Picker Column. Double Tap and Slide Up/Down Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. Keyboard Interactions​

Each Picker Column can be navigated using the keyboard when focused.

Key Description ArrowUp Scroll to the previous option. ArrowDown Scroll to the next option. PageUp Scroll up by more than one option. PageDown Scroll down by more than one option. Home Scroll to the first option. End Scroll to the last option. Properties​ mode​ Description The mode determines which platform styles to use. Attribute mode Type "ios" ｜ "md" Default undefined Events​

No events available for this component.

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 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4