ion-picker
选择器显示一列或多列，其中包含可供用户选择的选项。
¥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.
ConsoleConsole 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 Navigation
每个 拣选柱 都可以在聚焦时使用键盘进行导航。
¥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
| 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.