本文へスキップ
バージョン: v8

ion-picker

シャドウ

ピッカーは、ユーザーが選択できるオプションを1つ以上の列で表示します。

プレフィックスとサフィックスのコンテンツ​

prefixおよびsuffixスロットを使用して、ピッカーに追加のコンテンツを追加します。

テーマ​

CSS変数​

ピッカーのハイライトとフェードは、ion-pickerのCSS変数を使用してカスタマイズできます。開発者は、直接ターゲットを指定し、ホストレベルのスタイルを使用することで、ion-picker-column-optionsの個々の外観をカスタマイズできます。

モーダル内のピッカー​

ピッカーは、ion-modalなどのオーバーレイ内に表示して、確認またはキャンセルボタン付きのピッカーエクスペリエンスを作成できます。

コンソール
上記の例からログ出力されたコンソールメッセージはここに表示されます。

アクセシビリティ​

スクリーンリーダー​

ピッカーは、各ピッカー列にsliderロールを実装することで、スクリーンリーダーを使用したナビゲーションをサポートします。次のジェスチャーを使用して、ピッカーをナビゲートできます。

ジェスチャー機能
左にスワイプ前のピッカー列にフォーカスを移動します。
右にスワイプ次のピッカー列にフォーカスを移動します。
上にスワイプピッカー列の次のオプションを選択します。
下にスワイプピッカー列の前のオプションを選択します。
ダブルタップして上下にスライドピッカー列で選択したオプションを調整します。上下にスワイプする代わりに使用できます。
注意

上にスワイプするジェスチャーと下にスワイプするジェスチャーは、sliderのドキュメントに記載されているように、正しいキーイベントが合成されていることに依存します。Chromiumベースのブラウザはキーボードイベントを正しく合成しませんが、「ダブルタップして上下にスライド」ジェスチャーは、Chromiumベースのブラウザで実装されるまで代替手段として使用できます。

キーボード操作​

各ピッカー列は、フォーカスされているときにキーボードを使用してナビゲートできます。

キー説明
上矢印前のオプションにスクロールします。
下矢印次のオプションにスクロールします。
PageUp1つ以上のオプション分上にスクロールします。
PageDown1つ以上のオプション分下にスクロールします。
Home最初のオプションにスクロールします。
End最後のオプションにスクロールします。

プロパティ​

mode​

説明modeは、使用するプラットフォームスタイルを決定します。
属性mode
型"ios"｜"md"
デフォルト未定義

イベント​

このコンポーネントではイベントは使用できません。

メソッド​

このコンポーネントでは公開メソッドは使用できません。

CSSシャドウパーツ​

このコンポーネントではCSSシャドウパーツは使用できません。

CSSカスタムプロパティ​

名前説明
--fade-background-rgbrgb形式での選択されていないアイテムを覆うグラデーションの背景
--highlight-background選択されたアイテムのピッカーハイライトの背景
--highlight-border-radius選択されたアイテムのピッカーハイライトのボーダー半径

スロット​

このコンポーネントではスロットは使用できません。

目次

このページを編集する