ion-picker
ピッカーは、ユーザーが選択できるオプションを持つ1つまたは複数の列を表示します。
Prefix と Suffix コンテンツ
prefix
スロットと suffix
スロットを使用して、ピッカーに追加コンテンツを追加します。
テーマ
CSS変数
ピッカーのハイライトとフェードは ion-picker
の CSS 変数を使ってカスタマイズできる。開発者は、ion-picker-column-options
を直接ターゲットにして、ホストレベルのスタイリングを使用することで、個々の外観をカスタマイズすることができます。
Picker を Modal で使う
ピッカーはion-modal
のようなオーバーレイの中に表示することができ、確認ボタンやキャンセルボタンを使ってピッカー体験を作り出すことができる。
Console
Console messages will appear here when logged from the example above.
Accessibility
Screen Readers
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.
Gesture | Function |
---|---|
Swipe Left | Move focus to the previous Picker Column. |
Swipe Right | Move focus to the next Picker Column. |
Swipe Up | Select the next option in the Picker Column. |
Swipe Down | Select the previous option in the Picker Column. |
Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
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.
Key | Function |
---|---|
ArrowUp | Scroll to the previous option. |
ArrowDown | Scroll to the next option. |
PageUp | Scroll up by more than one option. |
PageDown | Scroll down by more than one option. |
Home | Scroll to the first option. |
End | Scroll to the last option. |