选择器组件
选择器会显示一列或多列选项供用户选择。
前缀与后缀内容
使用 prefix 和 suffix 插槽可以为选择器添加额外的内容。
主题定制
CSS 变量
选择器的高亮和淡出效果可以通过在 ion-picker 上使用 CSS 变量进行自定义。开发者可以通过直接定位 ion-picker-column-options 并使用宿主级别的样式来自定义其外观。
模态框中的选择器
选择器可以显示在覆盖层（如 ion-modal）内部，以创建带有确认或取消按钮的选择器体验。
ConsoleConsole messages will appear here when logged from the example above.无障碍访问
屏幕阅读器
选择器通过在每个选择器列上实现 slider 角色来支持屏幕阅读器导航。可以使用以下手势来浏览选择器。
| 手势 | 功能 |
|---|---|
| 向左滑动 | 将焦点移至上一个选择器列。 |
| 向右滑动 | 将焦点移至下一个选择器列。 |
| 向上滑动 | 在选择器列中选择下一个选项。 |
| 向下滑动 | 在选择器列中选择上一个选项。 |
| 双击并向上/向下滑动 | 调整选择器列中的选定选项。可作为向上/向下滑动的替代方案。 |
警告
向上滑动和向下滑动手势依赖于正确的键盘事件合成，如 slider 文档所述。基于 Chromium 的浏览器未能正确合成键盘事件，但在基于 Chromium 的浏览器实现此功能之前，可以使用“双击并向上/向下滑动”手势作为替代方案。
键盘交互
每个选择器列在获得焦点时都可以使用键盘进行导航。
| 按键 | 描述 |
|---|---|
| ArrowUp | 向上滚动至上一个选项。 |
| ArrowDown | 向下滚动至下一个选项。 |
| PageUp | 向上滚动多个选项。 |
| PageDown | 向下滚动多个选项。 |
| Home | 滚动至第一个选项。 |
| End | 滚动至最后一个选项。 |
属性
mode
| Description | The mode determines which platform styles to use. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
事件
No events available for this component.
方法
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
- iOS
- 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 |
| 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 |
插槽
No slots available for this component.