ion-picker

shadow

选择器显示一列或多列，其中包含可供用户选择的选项。

¥A Picker displays one or more columns with options for users to choose from.

前缀和后缀内容

¥Prefix & Suffix Content

使用 prefix 和 suffix 插槽向选择器添加其他内容。

¥Use the prefix and suffix slots to add additional content to the picker.

主题化

¥Theming

CSS 变量

¥CSS Variables

可以使用 ion-picker 上的 CSS 变量自定义选择器高亮和淡入淡出。开发者可以直接针对 ion-picker-column-options 并使用主机级样式来自定义 ion-picker-column-options 的个性化外观。

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

Modal 的选取器

¥Picker in Modal

选择器可以显示在覆盖层内，例如 ion-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 通过在每个 拣选柱 上实现 slider 角色 来支持使用屏幕阅读器进行导航。以下手势可用于导航选取器。

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

手势	函数
向左滑动	将焦点移至上一个选择器列。
向右滑动	将焦点移至下一个选择器列。
向上滑动	选择选取器列中的下一个选项。
刷下	选择选取器列中的上一个选项。
双击并向上/向下滑动	调整选取器列中选定的选项。可以用作上下滑动的替代方法。

提醒

向上滑动和向下滑动手势依赖于合成的正确按键事件，如 slider 文档 上所述。基于 Chromium 的浏览器无法正确合成键盘事件，但 "双击并向上/向下滑动" 手势可以用作替代方案，直到在基于 Chromium 的浏览器中实现为止。

¥The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the slider documentation. Chromium-based browsers do not synthesize keyboard events correctly, but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.

键盘交互

¥Keyboard Interactions

每个 拣选柱 都可以在聚焦时使用键盘进行导航。

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

密钥	描述
ArrowUp	滚动到上一个选项。
ArrowDown	滚动到下一个选项。
PageUp	向上滚动多个选项。
PageDown	向下滚动多个选项。
Home	滚动到第一个选项。
End	滚动到最后一个选项。

属性

¥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 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

iOS

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

MD

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.