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 并使用宿主级样式来自定义其单独的外观。
🌐 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 通过在每个 Picker Column 上实现 slider role 来支持使用屏幕阅读器进行导航。可以使用以下手势来导航 Picker。
🌐 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 的浏览器实现之前，可以使用“轻击两次并向上/向下滑动”手势作为替代。
键盘交互
🌐 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. 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 |
事件
🌐 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
- 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 |
插槽
🌐 Slots
No slots available for this component.