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.

Single Column

Display a list of options in a single, scrollable column.

Multiple Columns

Display multiple columns of different options.

Interfaces

PickerButton

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

PickerColumn

interface PickerColumn {
  name: string;
  align?: string;
  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;
}

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

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

Events

Name	Description
ionPickerDidDismiss	ピッカーが解散した後に発行されます。
ionPickerDidPresent	ピッカーが提示された後に発行されます。
ionPickerWillDismiss	ピッカーが解散する前に発行されます。
ionPickerWillPresent	ピッカーが提示される前に発行されます。

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.