| title | ion-picker |
|---|
import Props from '@ionic-internal/component-api/v8/picker/props.md'; import Events from '@ionic-internal/component-api/v8/picker/events.md'; import Methods from '@ionic-internal/component-api/v8/picker/methods.md'; import Parts from '@ionic-internal/component-api/v8/picker/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/picker/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/picker/slots.md';
<title>ion-picker: Display a list of options in columns</title>import EncapsulationPill from '@components/page/api/EncapsulationPill';
ピッカーは、ユーザーが選択できるオプションを持つ1つまたは複数の列を表示します。
import Basic from '@site/static/usage/v8/picker/basic/index.md';
prefix スロットと suffix スロットを使用して、ピッカーに追加コンテンツを追加します。
import PrefixSuffix from '@site/static/usage/v8/picker/prefix-suffix/index.md';
ピッカーのハイライトとフェードは ion-picker の CSS 変数を使ってカスタマイズできる。開発者は、ion-picker-column-options を直接ターゲットにして、ホストレベルのスタイリングを使用することで、個々の外観をカスタマイズすることができます。
import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index.md';
ピッカーはion-modalのようなオーバーレイの中に表示することができ、確認ボタンやキャンセルボタンを使ってピッカー体験を作り出すことができる。
import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
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. |
:::caution
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.
:::
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. |
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. |
:::caution
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.
:::
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. |
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. |
:::caution
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.
:::
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. |
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. |
:::caution
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.
:::
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. |
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. |
:::caution
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.
:::
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. |