本文へスキップ
バージョン：v8

ion-picker-legacy

スコープ
非推奨に関する通知

ion-picker-legacyは非推奨であり、次のメジャーリリースで削除されます。できるだけ早くion-pickerに移行してください。

ピッカーは、ボタンの行とその下に列を表示するダイアログです。アプリのコンテンツの上、ビューポートの下部に表示されます。

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

コンソール
上記の例からログ出力されたコンソールメッセージはここに表示されます。

isOpenの使用​

ion-picker-legacyのisOpenプロパティを使用すると、アプリケーションの状態からピッカーの表示状態を制御できます。つまり、isOpenがtrueに設定されている場合、ピッカーが表示され、isOpenがfalseに設定されている場合、ピッカーは閉じられます。

isOpenは一方向データバインディングを使用しているため、ピッカーが閉じられたときに自動的にfalseに設定されることはありません。開発者はionPickerDidDismissまたはdidDismissイベントをリッスンし、isOpenをfalseに設定する必要があります。これは、ion-pickerの内側をアプリケーションの状態と密接に結合するのを防ぐためです。一方向データバインディングを使用すると、ピッカーは反応型変数が提供するブール値のみを処理する必要があります。双方向データバインディングでは、ピッカーはブール値と反応型変数の存在の両方を処理する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。

コンソール
上記の例からログ出力されたコンソールメッセージはここに表示されます。

コントローラーピッカー​

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

コンソール
上記の例からログ出力されたコンソールメッセージはここに表示されます。

複数の列​

columnsプロパティを使用して、異なるオプションの複数の列を持つピッカーを表示できます。

コンソール
上記の例からログ出力されたコンソールメッセージはここに表示されます。

インターフェース​

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​

説明trueの場合、ピッカーはアニメーションします。
属性animated
型boolean
デフォルトtrue

backdropDismiss​

説明trueの場合、背景がクリックされるとピッカーは閉じられます。
属性backdrop-dismiss
型boolean
デフォルトtrue

buttons​

説明ピッカーの上部に表示されるボタンの配列。
属性undefined
型PickerButton[]
デフォルト[]

columns​

説明ピッカーに表示される列の配列。
属性undefined
型PickerColumn[]
デフォルト[]

cssClass​

説明カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
属性css-class
型string ｜ string[] ｜ undefined
デフォルトundefined

duration​

説明ピッカーを閉じる前に待機するミリ秒数。
属性duration
型number
デフォルト0

enterAnimation​

説明ピッカーが表示されるときに使用するアニメーション。
属性undefined
型((baseEl: any, opts?: any) => Animation) ｜ undefined
デフォルトundefined

htmlAttributes​

説明ピッカーに渡す追加の属性。
属性undefined
型undefined ｜ { [key: string]: any; }
デフォルトundefined

isOpen​

説明trueの場合、ピッカーが開きます。falseの場合、ピッカーは閉じます。表示をより細かく制御する必要がある場合はこれを使用し、それ以外の場合はpickerControllerまたはtriggerプロパティを使用します。注：ピッカーが閉じられたときにisOpenは自動的にfalseに戻りません。コードでそれを行う必要があります。
属性is-open
型boolean
デフォルトfalse

keyboardClose​

説明trueの場合、オーバーレイが表示されるとキーボードは自動的に閉じられます。
属性keyboard-close
型boolean
デフォルトtrue

leaveAnimation​

説明ピッカーが閉じられるときに使用するアニメーション。
属性undefined
型((baseEl: any, opts?: any) => Animation) ｜ undefined
デフォルトundefined

mode​

説明モードは、使用するプラットフォームスタイルを決定します。
属性mode
型"ios" ｜ "md"
デフォルトundefined

showBackdrop​

説明trueの場合、ピッカーの後ろに背景が表示されます。
属性show-backdrop
型boolean
デフォルトtrue

trigger​

説明クリックされたときにピッカーを開くトリガー要素に対応するID。
属性trigger
型string ｜ undefined
デフォルトundefined

イベント​

名前説明バブル
didDismissピッカーが閉じられた後に送信されます。ionPickerDidDismissの省略形。true
didPresentピッカーが表示された後に送信されます。ionPickerWillDismissの省略形。true
ionPickerDidDismissピッカーが閉じられた後に送信されます。true
ionPickerDidPresentピッカーが表示された後に送信されます。true
ionPickerWillDismissピッカーが閉じられる前に送信されます。true
ionPickerWillPresentピッカーが表示される前に送信されます。true
willDismissピッカーが閉じられる前に送信されます。ionPickerWillDismissの省略形。true
willPresentピッカーが表示される前に送信されます。ionPickerWillPresentの省略形。true

メソッド​

dismiss​

説明表示された後にピッカーオーバーレイを閉じます。
シグネチャdismiss(data?: any, role?: string) => Promise<boolean>

getColumn​

説明指定された名前に一致する列を取得します。
シグネチャgetColumn(name: string) => Promise<PickerColumn ｜ undefined>

onDidDismiss​

説明ピッカーが閉じられた時に解決されるPromiseを返します。
シグネチャonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss​

説明ピッカーが閉じられる時に解決されるPromiseを返します。
シグネチャonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present​

説明作成後、ピッカーオーバーレイを表示します。
シグネチャpresent() => Promise<void>

CSSシャドウパーツ​

このコンポーネントにはCSSシャドウパーツはありません。

CSSカスタムプロパティ​

名前説明
--backdrop-opacity背景の不透明度
--backgroundピッカーの背景
--background-rgbピッカーの背景（RGB形式）
--border-colorピッカーの枠線の色
--border-radiusピッカーの枠線の丸み
--border-styleピッカーの枠線のスタイル
--border-widthピッカーの枠線の幅
--heightピッカーの高さ
--max-heightピッカーの最大高さ
--max-widthピッカーの最大幅
--min-heightピッカーの最小高さ
--min-widthピッカーの最小幅
--widthピッカーの幅

スロット​

このコンポーネントにはスロットはありません。

目次

このページを編集