Skip to main content
Version: v6

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​

Descriptiontrueの場合、ピッカーはアニメーションを行います。
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss​

Descriptiontrueの場合、バックドロップがクリックされるとピッカーが解除される。
Attributebackdrop-dismiss
Typeboolean
Defaulttrue

buttons​

Descriptionピッカーの上部に表示されるボタンの配列。
Attributeundefined
TypePickerButton[]
Default[]

columns​

Descriptionピッカーに表示されるカラムの配列。
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​

Descriptionピッカーが終了するまでの待ち時間をミリ秒単位で指定します。
Attributeduration
Typenumber
Default0

enterAnimation​

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

htmlAttributes​

Descriptionピッカーに渡す追加属性。
Attributeundefined
Typeundefined ｜ { [key: string]: any; }
Defaultundefined

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

Events​

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

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