ion-picker
选择器显示一个或多个包含用户可选择的选项的列。
前缀和后缀内容
使用 prefix 和 suffix 插槽将更多内容添加到选择器。
主题
CSS 变量
可以使用 ion-picker 上的 CSS 变量自定义选择器高亮和淡出效果。开发人员可以通过直接定位 ion-picker-column-options 并使用主机级别样式来自定义 ion-picker-column-options 的单独外观。
模态框中的选择器
选择器可以显示在叠加层中，例如 ion-modal，以创建带有确认或取消按钮的选择器体验。
控制台从上面的示例中记录的控制台消息将显示在此处。无障碍性
屏幕阅读器
选择器通过在每个 选择器列 上实现 slider 角色 来支持使用屏幕阅读器进行导航。可以使用以下手势导航选择器。
| 手势 | 功能 |
|---|---|
| 左滑 | 将焦点移动到上一个选择器列。 |
| 右滑 | 将焦点移动到下一个选择器列。 |
| 上滑 | 选择选择器列中的下一个选项。 |
| 下滑 | 选择选择器列中的上一个选项。 |
| 双击并上下滑动 | 调整选择器列中的所选选项。可以用作上下滑动的替代方法。 |
警告
上滑和下滑手势依赖于正确合成键盘事件，如 slider 文档 中所述。 基于 Chromium 的浏览器没有正确合成键盘事件，但“双击并上下滑动”手势可以用作替代方法，直到在基于 Chromium 的浏览器中实现此功能。
键盘交互
每个 选择器列 都可以通过键盘进行导航，前提是该列处于焦点状态。
| 键 | 描述 |
|---|---|
| 向上箭头 | 滚动到上一个选项。 |
| 向下箭头 | 滚动到下一个选项。 |
| PageUp | 向上滚动多个选项。 |
| PageDown | 向下滚动多个选项。 |
| Home | 滚动到第一个选项。 |
| End | 滚动到最后一个选项。 |
属性
mode
| 描述 | 模式决定要使用哪个平台样式。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
事件
此组件没有可用事件。
方法
此组件没有公开的方法。
CSS 阴影部分
此组件没有 CSS 阴影部分。
CSS 自定义属性
- iOS
- MD
| 名称 | 描述 |
|---|---|
--fade-background-rgb | 以 rgb 格式表示覆盖未选中项目的渐变的背景 |
--highlight-background | 选中项目的选择器高亮显示的背景 |
--highlight-border-radius | 选中项目的选择器高亮显示的边框圆角 |
| 名称 | 描述 |
|---|---|
--fade-background-rgb | 以 rgb 格式表示覆盖未选中项目的渐变的背景 |
--highlight-background | 选中项目的选择器高亮显示的背景 |
--highlight-border-radius | 选中项目的选择器高亮显示的边框圆角 |
插槽
此组件没有插槽。