Skip to main content
Version: v7

ion-picker

scoped

Pickerは、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。

インラインピッカー(推奨)

ion-pickerは、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ピッカーを表示するために必要なハンドラの数を減らすことができます。

isOpen を使う

ion-pickerisOpen プロパティにより、開発者はアプリケーションの状態からピッカーの表示状態を制御することができます。つまり、isOpentrue に設定するとピッカーが表示され、isOpenfalse に設定するとピッカーは退場します。

isOpen は一方通行のデータバインディングを使用しているため、ピッカーが終了したときに自動的に false に設定されることはありません。開発者は ionPickerDidDismiss または didDismiss イベントを待ち、 isOpenfalse に設定する必要があります。この理由は、ion-pickerの内部がアプリケーションの状態と密に結合するのを防ぐためです。一方通行のデータバインディングでは、ピッカーはリアクティブ変数が提供するブーリアン値のみに関心を持つ必要があります。一方通行のデータバインディングでは、ピッカーはリアクティブ変数のブール値だけでなく、リアクティブ変数の存在も気にする必要があります。このため、非決定的な動作が発生し、アプリケーションのデバッグが困難になる可能性があります。

Controller Pickers

pickerControllerは、ピッカーの表示・非表示をより細かく制御する必要がある場合に使用することができます。

マルチカラム

columnsプロパティは、異なる選択肢を複数の列で表示するピッカーを表示するために使用することができます。

Interfaces

PickerButton

interface PickerButton {
text?: string;
role?: string;
cssClass?: string | string[];
handler?: (value: any) => boolean | void;
}

PickerColumn

interface PickerColumn {
name: string;
align?: string;
/**
* Changing this value allows the initial value of a picker column to be set.
*/
selectedIndex?: number;
prevSelected?: number;
prefix?: string;
suffix?: string;
options: PickerColumnOption[];
cssClass?: string | string[];
columnWidth?: string;
prefixWidth?: string;
suffixWidth?: string;
optionsWidth?: string;
}

PickerColumnOption

interface PickerColumnOption {
text?: string;
value?: any;
disabled?: boolean;
duration?: number;
transform?: string;
selected?: boolean;
/**
* The optional text to assign as the aria-label on the picker column option.
*/
ariaLabel?: string;
}

PickerOptions

interface PickerOptions {
columns: PickerColumn[];
buttons?: PickerButton[];
cssClass?: string | string[];
showBackdrop?: boolean;
backdropDismiss?: boolean;
animated?: boolean;

mode?: Mode;
keyboardClose?: boolean;
id?: string;
htmlAttributes?: { [key: string]: any };

enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
}

プロパティ

animated

Descriptiontrueの場合、ピッカーはアニメーションを行います。
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

Descriptiontrueの場合、バックドロップがクリックされるとピッカーが解除される。
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons

Descriptionピッカーの上部に表示されるボタンの配列。
Attributeundefined
TypePickerButton[]
Default[]

columns

Descriptionピッカーに表示されるカラムの配列。
Attributeundefined
TypePickerColumn[]
Default[]

cssClass

DescriptionカスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

duration

Descriptionピッカーが終了するまでの待ち時間をミリ秒単位で指定します。
Attributeduration
Typenumber
Default0

enterAnimation

Descriptionピッカーが表示されたときに使用するアニメーション。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

htmlAttributes

Descriptionピッカーに渡す追加属性。
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

isOpen

Descriptiontrueの場合、ピッカーは開きます。falseの場合、ピッカーは閉じます。ピッカーの表示をより細かく制御したい場合に使用します。それ以外の場合は pickerController や trigger プロパティを使用します。注意: ピッカーが終了しても isOpen は自動的に false に戻りません。あなたのコードでそれを行う必要があります。
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose

Descriptiontrueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

Descriptionピッカーが解除されたときに使用するアニメーションです。
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

showBackdrop

Descriptiontrueの場合、ピッカーの後ろに背景が表示されます。
Attributeshow-backdrop
Typeboolean
Defaulttrue

trigger

Descriptionクリックするとピッカーが開くトリガー要素に対応するID。
Attributetrigger
Typestring | undefined
Defaultundefined

イベント

NameDescription
didDismissピッカーが解散した後に発行されます。ionPickerDidDismissの略記です。
didPresentピッカーが提示された後に発行されます。ionPickerWillDismissの略記です。
ionPickerDidDismissピッカーが解散した後に発行されます。
ionPickerDidPresentピッカーが提示された後に発行されます。
ionPickerWillDismissピッカーが解散する前に発行されます。
ionPickerWillPresentピッカーが提示される前に発行されます。
willDismissピッカーが解散する前に発行されます。ionPickerWillDismissの略記です。
willPresentピッカーが提示される前に発行されます。ionPickerWillPresentの略記です。

メソッド

dismiss

Descriptionピッカー・オーバーレイが表示された後、それを解除します。
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

getColumn

Description指定された名前に一致するカラムを取得します。
SignaturegetColumn(name: string) => Promise<PickerColumn | undefined>

onDidDismiss

Descriptionピッカーが解散したことを解決するPromiseを返します。
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

Descriptionピッカーが解散するタイミングを解決するPromiseを返します。
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

Descriptionピッカー・オーバーレイを作成した後に提示します。
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backdrop-opacity背景の不透明度
--backgroundピッカーの背景
--background-rgbピッカーの背景(rgb形式)
--border-colorピッカーのボーダーカラー
--border-radiusピッカーのボーダー半径
--border-styleピッカーのボーダースタイル
--border-widthピッカーのボーダー幅
--heightピッカーの高さ
--max-heightピッカーの最大の高さ
--max-widthピッカーの最大幅
--min-heightピッカーの最小の高さ
--min-widthピッカーの最小幅
--widthピッカーの幅

Slots

No slots available for this component.