Skip to main content
Version: v8

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.

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​

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

Events​

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

Methods​

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 Custom Properties​

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.

Contents

Edit this page