Skip to main content
Version: v7

ion-picker

scoped

Pickerは、画面下にボタンと列の行を表示するダイアログです。アプリケーションのコンテンツの上部とビューポートの下部に表示されます。

インラインピッカー（推奨）​

ion-pickerは、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ピッカーを表示するために必要なハンドラの数を減らすことができます。

isOpen を使う​

ion-picker の isOpen プロパティにより、開発者はアプリケーションの状態からピッカーの表示状態を制御することができます。つまり、isOpen を true に設定するとピッカーが表示され、isOpen を false に設定するとピッカーは退場します。

isOpen は一方通行のデータバインディングを使用しているため、ピッカーが終了したときに自動的に false に設定されることはありません。開発者は ionPickerDidDismiss または didDismiss イベントを待ち、 isOpen を false に設定する必要があります。この理由は、ion-pickerの内部がアプリケーションの状態と密に結合するのを防ぐためです。一方通行のデータバインディングでは、ピッカーはリアクティブ変数が提供するブーリアン値のみに関心を持つ必要があります。一方通行のデータバインディングでは、ピッカーはリアクティブ変数のブール値だけでなく、リアクティブ変数の存在も気にする必要があります。このため、非決定的な動作が発生し、アプリケーションのデバッグが困難になる可能性があります。

Controller Pickers​

pickerControllerは、ピッカーの表示・非表示をより細かく制御する必要がある場合に使用することができます。

マルチカラム​

columnsプロパティは、異なる選択肢を複数の列で表示するピッカーを表示するために使用することができます。

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

プロパティ​

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

isOpen​

DescriptionIf 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.
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​

DescriptionAn ID corresponding to the trigger element that causes the picker to open when clicked.
Attributetrigger
Typestring ｜ undefined
Defaultundefined

イベント​

NameDescription
didDismissEmitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
didPresentEmitted after the picker has presented. Shorthand for ionPickerWillDismiss.
ionPickerDidDismissピッカーが解散した後に発行されます。
ionPickerDidPresentピッカーが提示された後に発行されます。
ionPickerWillDismissピッカーが解散する前に発行されます。
ionPickerWillPresentピッカーが提示される前に発行されます。
willDismissEmitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
willPresentEmitted before the picker has presented. Shorthand for ionPickerWillPresent.

メソッド​

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カスタムプロパティ​

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