ion-picker-legacy

scoped

Deprecation Notice

ion-picker-legacy is deprecated and will be removed in the next major release. Migrate to ion-picker as soon as possible.

A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.

Inline Pickers (Recommended)

ion-picker-legacy can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Picker.

Console

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

Using isOpen

The isOpen property on ion-picker-legacy allows developers to control the presentation state of the Picker from their application state. This means when isOpen is set to true the Picker will be presented, and when isOpen is set to false the Picker will be dismissed.

isOpen uses a one-way data binding, meaning it will not automatically be set to false when the Picker is dismissed. Developers should listen for the ionPickerDidDismiss or didDismiss event and set isOpen to false. The reason for this is it prevents the internals of ion-picker from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.

Console

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

Controller Pickers

The pickerController can be used in situations where more control is needed over when the Picker is presented and dismissed.

Console

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

Multiple Columns

The columns property can be used to display a Picker with multiple columns of different options.

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;
}

Properties

animated

Description	trueの場合、ピッカーはアニメーションを行います。
Attribute	animated
Type	boolean
Default	true

backdropDismiss

Description	trueの場合、バックドロップがクリックされるとピッカーが解除される。
Attribute	backdrop-dismiss
Type	boolean
Default	true

buttons

Description	ピッカーの上部に表示されるボタンの配列。
Attribute	undefined
Type	PickerButton[]
Default	[]

columns

Description	ピッカーに表示されるカラムの配列。
Attribute	undefined
Type	PickerColumn[]
Default	[]

cssClass

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

duration

Description	ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。
Attribute	duration
Type	number
Default	0

enterAnimation

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

htmlAttributes

Description	ピッカーに渡す追加属性。
Attribute	undefined
Type	undefined ｜ { [key: string]: any; }
Default	undefined

isOpen

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

keyboardClose

Description	trueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attribute	keyboard-close
Type	boolean
Default	true

leaveAnimation

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

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

showBackdrop

Description	trueの場合、ピッカーの後ろに背景が表示されます。
Attribute	show-backdrop
Type	boolean
Default	true

trigger

Description	クリックするとピッカーが開くトリガー要素に対応するID。
Attribute	trigger
Type	string ｜ undefined
Default	undefined

Events

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

Methods

dismiss

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

getColumn

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

onDidDismiss

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

onWillDismiss

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

present

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

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

Name	Description
--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.