Skip to main content
Version: v7

ion-picker

scoped

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

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

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

Console
Console messages will appear here when logged from the example above.

isOpen を使う​

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

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

Console
Console messages will appear here when logged from the example above.

Controller Pickers​

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

Console
Console messages will appear here when logged from the example above.

マルチカラム​

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

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

プロパティ​

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

イベント​

NameDescription
didDismissピッカーが解散した後に発行されます。ionPickerDidDismissの略記です。
didPresentピッカーが提示された後に発行されます。ionPickerWillDismissの略記です。
ionPickerDidDismissピッカーが解散した後に発行されます。
ionPickerDidPresentピッカーが提示された後に発行されます。
ionPickerWillDismissピッカーが解散する前に発行されます。
ionPickerWillPresentピッカーが提示される前に発行されます。
willDismissピッカーが解散する前に発行されます。ionPickerWillDismissの略記です。
willPresentピッカーが提示される前に発行されます。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