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 Interactions
Each Picker Column can be navigated using the keyboard when focused.
| Key | Description |
|---|---|
| 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 | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| 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カスタムプロパティ
- iOS
- MD
| Name | Description |
|---|---|
--fade-background-rgb | 非選択項目をカバーするグラデーションの背景（rgb形式 |
--highlight-background | 選択されたアイテムのピッカー・ハイライトの背景 |
--highlight-border-radius | 選択されたアイテムのピッカーハイライトの境界半径 |
| Name | Description |
|---|---|
--fade-background-rgb | 非選択項目をカバーするグラデーションの背景（rgb形式 |
--highlight-background | 選択されたアイテムのピッカー・ハイライトの背景 |
--highlight-border-radius | 選択されたアイテムのピッカーハイライトの境界半径 |
Slots
No slots available for this component.