ion-picker
Picker 显示一个或多个列，其中包含供用户选择的选项。
前缀和后缀内容
使用 prefix 和 suffix 插槽向选择器添加额外内容。
主题
CSS 变量
选择器的高亮和淡入淡出效果可以使用 ion-picker 上的 CSS 变量进行自定义。开发者可以通过直接定位 ion-picker-column-options 并使用宿主级别样式来自定义其单独外观。
在 Modal 中使用 Picker
Picker 可以显示在覆盖层（如 ion-modal）内部，以创建带有确认或取消按钮的选择器体验。
控制台控制台消息将在上方示例中调用 console.log 时显示在此处。无障碍
屏幕阅读器
Picker 通过在每个 Picker Column 上实现 slider 角色来支持使用屏幕阅读器进行导航。以下手势可用于导航 Picker。
| 手势 | 功能 |
|---|---|
| 向左滑动 | 将焦点移动到上一个 Picker Column。 |
| 向右滑动 | 将焦点移动到下一个 Picker Column。 |
| 向上滑动 | 在 Picker Column 中选择下一个选项。 |
| 向下滑动 | 在 Picker Column 中选择上一个选项。 |
| 双击并上下滑动 | 调整 Picker Column 中所选选项。可替代上下滑动使用。 |
警告
向上滑动和向下滑动手势依赖于如 slider 文档所述的正确合成按键事件。基于 Chromium 的浏览器无法正确合成键盘事件，但在 Chromium 浏览器实现此功能之前，可以使用"双击并上下滑动"手势作为替代方案。
键盘交互
每个 Picker Column 在聚焦时可以使用键盘进行导航。
| 键 | 描述 |
|---|---|
| ArrowUp | 滚动到上一个选项。 |
| ArrowDown | 滚动到下一个选项。 |
| PageUp | 向上滚动多个选项。 |
| PageDown | 向下滚动多个选项。 |
| Home | 滚动到第一个选项。 |
| End | 滚动到最后一个选项。 |
属性
mode
| 说明 | The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
事件
该组件没有可用的事件。
方法
该组件没有可用的公共方法。
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
- iOS
- MD
| Name | 说明 |
|---|---|
--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 | 说明 |
|---|---|
--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 |
插槽
该组件没有可用的插槽。