ion-picker

scoped

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 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 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	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
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	If 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.
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	An ID corresponding to the trigger element that causes the picker to open when clicked.
Attribute	trigger
Type	string ｜ undefined
Default	undefined

Events

Name	Description	Bubbles
didDismiss	Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.	true
didPresent	Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.	true
ionPickerDidDismiss	ピッカーが解散した後に発行されます。	true
ionPickerDidPresent	ピッカーが提示された後に発行されます。	true
ionPickerWillDismiss	ピッカーが解散する前に発行されます。	true
ionPickerWillPresent	ピッカーが提示される前に発行されます。	true
willDismiss	Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.	true
willPresent	Emitted before the picker has presented. Shorthand for 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.