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

ion-picker

scoped

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

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

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

Console
Console messages will appear here when logged from the example above.

isOpen を使う

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

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

Console
Console messages will appear here when logged from the example above.

Controller Pickers

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

Console
Console messages will appear here when logged from the example above.

マルチカラム

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

Console
Console messages will appear here when logged from the example above.

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

DescriptionIf true, the picker will animate.
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

DescriptionIf true, the picker will be dismissed when the backdrop is clicked.
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons

DescriptionArray of buttons to be displayed at the top of the picker.
Attributeundefined
TypePickerButton[]
Default[]

columns

DescriptionArray of columns to be displayed in the picker.
Attributeundefined
TypePickerColumn[]
Default[]

cssClass

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

duration

DescriptionNumber of milliseconds to wait before dismissing the picker.
Attributeduration
Typenumber
Default0

enterAnimation

DescriptionAnimation to use when the picker is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

htmlAttributes

DescriptionAdditional attributes to pass to the picker.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

isOpen

DescriptionIf true, the picker will open. If false, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the trigger property. Note: isOpen will not automatically be set back to false when the picker dismisses. You will need to do that in your code.
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

DescriptionAnimation to use when the picker is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

mode

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

showBackdrop

DescriptionIf true, a backdrop will be displayed behind the picker.
Attributeshow-backdrop
Typeboolean
Defaulttrue

trigger

DescriptionAn ID corresponding to the trigger element that causes the picker to open when clicked.
Attributetrigger
Typestring | undefined
Defaultundefined

イベント

NameDescriptionBubbles
didDismissEmitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.true
didPresentEmitted after the picker has presented. Shorthand for ionPickerWillDismiss.true
ionPickerDidDismissEmitted after the picker has dismissed.true
ionPickerDidPresentEmitted after the picker has presented.true
ionPickerWillDismissEmitted before the picker has dismissed.true
ionPickerWillPresentEmitted before the picker has presented.true
willDismissEmitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.true
willPresentEmitted before the picker has presented. Shorthand for ionPickerWillPresent.true

メソッド

dismiss

DescriptionDismiss the picker overlay after it has been presented.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

getColumn

DescriptionGet the column that matches the specified name.
SignaturegetColumn(name: string) => Promise<PickerColumn | undefined>

onDidDismiss

DescriptionReturns a promise that resolves when the picker did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

DescriptionReturns a promise that resolves when the picker will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the picker overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backdrop-opacityOpacity of the backdrop
--backgroundBackground of the picker
--background-rgbBackground of the picker in rgb format
--border-colorBorder color of the picker
--border-radiusBorder radius of the picker
--border-styleBorder style of the picker
--border-widthBorder width of the picker
--heightHeight of the picker
--max-heightMaximum height of the picker
--max-widthMaximum width of the picker
--min-heightMinimum height of the picker
--min-widthMinimum width of the picker
--widthWidth of the picker

Slots

No slots available for this component.