ion-picker
ピッカーは、ユーザーが選択できるオプションを持つ1つまたは複数の列を表示します。
Prefix と Suffix コンテンツ
prefix スロットと suffix スロットを使用して、ピッカーに追加コンテンツを追加します。
テーマ
CSS変数
ピッカーのハイライトとフェードは ion-picker の CSS 変数を使ってカスタマイズできる。開発者は、ion-picker-column-options を直接ターゲットにして、ホストレベルのスタイリングを使用することで、個々の外観をカスタマイズすることができます。
Picker を Modal で使う
ピッカーはion-modalのようなオーバーレイの中に表示することができ、確認ボタンやキャンセルボタンを使ってピッカー体験を作り出すことができる。
ConsoleConsole 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. |
プロパティ
mode
| Description | The mode determines which platform styles to use. |
| 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カスタムプロパティ
| 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.