メインコンテンツまでスキップ
バージョン: v8

ion-picker

shadow

ピッカーは、ユーザーが選択できるオプションを持つ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.

GestureFunction
Swipe LeftMove focus to the previous Picker Column.
Swipe RightMove focus to the next Picker Column.
Swipe UpSelect the next option in the Picker Column.
Swipe DownSelect the previous option in the Picker Column.
Double Tap and Slide Up/DownAdjust 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.

KeyFunction
ArrowUpScroll to the previous option.
ArrowDownScroll to the next option.
PageUpScroll up by more than one option.
PageDownScroll down by more than one option.
HomeScroll to the first option.
EndScroll to the last option.

プロパティ

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

イベント

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カスタムプロパティ

NameDescription
--fade-background-rgbBackground of the gradient covering non-selected items in rgb format
--highlight-backgroundBackground of the picker highlight for the selected item
--highlight-border-radiusBorder radius of the picker highlight for the selected item

Slots

No slots available for this component.