Version: v7

ion-picker

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

Description	`true`の場合、ピッカーはアニメーションを行います。
Attribute	`animated`
Type	`boolean`
Default	`true`

backdropDismiss

Description	`true`の場合、バックドロップがクリックされるとピッカーが解除される。
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`true`

buttons

Description	ピッカーの上部に表示されるボタンの配列。
Attribute	`undefined`
Type	`PickerButton[]`
Default	`[]`

columns

Description	ピッカーに表示されるカラムの配列。
Attribute	`undefined`
Type	`PickerColumn[]`
Default	`[]`

cssClass

Description	カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attribute	`css-class`
Type	`string ｜ string[] ｜ undefined`
Default	`undefined`

duration

Description	ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。
Attribute	`duration`
Type	`number`
Default	`0`

enterAnimation

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

htmlAttributes

Description	ピッカーに渡す追加属性。
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

isOpen

Description	`true`の場合、ピッカーは開きます。`false`の場合、ピッカーは閉じます。ピッカーの表示をより細かく制御したい場合に使用します。それ以外の場合は pickerController や `trigger` プロパティを使用します。注意: ピッカーが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。
Attribute	`is-open`
Type	`boolean`
Default	`false`

keyboardClose

Description	`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`

leaveAnimation

Description	ピッカーが解除されたときに使用するアニメーションです。
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

showBackdrop

Description	`true`の場合、ピッカーの後ろに背景が表示されます。
Attribute	`show-backdrop`
Type	`boolean`
Default	`true`

trigger

Description	クリックするとピッカーが開くトリガー要素に対応するID。
Attribute	`trigger`
Type	`string ｜ undefined`
Default	`undefined`

イベント

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

メソッド

dismiss

Description	ピッカー・オーバーレイが表示された後、それを解除します。
Signature	`dismiss(data?: any, role?: string) => Promise<boolean>`

getColumn

Description	指定された名前に一致するカラムを取得します。
Signature	`getColumn(name: string) => Promise<PickerColumn ｜ undefined>`

onDidDismiss

Description	ピッカーが解散したことを解決するPromiseを返します。
Signature	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

Description	ピッカーが解散するタイミングを解決するPromiseを返します。
Signature	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

Description	ピッカー・オーバーレイを作成した後に提示します。
Signature	`present() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--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.

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

isOpen を使う​

Controller Pickers​

マルチカラム​

Interfaces​

PickerButton​

PickerColumn​

PickerColumnOption​

PickerOptions​

プロパティ​

animated​

backdropDismiss​

buttons​

columns​

cssClass​

duration​

enterAnimation​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

showBackdrop​

trigger​

イベント​

メソッド​

dismiss​

getColumn​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents