バージョン: v8 (beta)

ion-picker

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

Description	If `true`, the picker will animate.
Attribute	`animated`
Type	`boolean`
Default	`true`

backdropDismiss

Description	If `true`, the picker will be dismissed when the backdrop is clicked.
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`true`

buttons

Description	Array of buttons to be displayed at the top of the picker.
Attribute	`undefined`
Type	`PickerButton[]`
Default	`[]`

columns

Description	Array of columns to be displayed in the picker.
Attribute	`undefined`
Type	`PickerColumn[]`
Default	`[]`

cssClass

Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	`css-class`
Type	`string ｜ string[] ｜ undefined`
Default	`undefined`

duration

Description	Number of milliseconds to wait before dismissing the picker.
Attribute	`duration`
Type	`number`
Default	`0`

enterAnimation

Description	Animation to use when the picker is presented.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

htmlAttributes

Description	Additional attributes to pass to the picker.
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

isOpen

Description	If `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.
Attribute	`is-open`
Type	`boolean`
Default	`false`

keyboardClose

Description	If `true`, the keyboard will be automatically dismissed when the overlay is presented.
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`

leaveAnimation

Description	Animation to use when the picker is dismissed.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

showBackdrop

Description	If `true`, a backdrop will be displayed behind the picker.
Attribute	`show-backdrop`
Type	`boolean`
Default	`true`

trigger

Description	An ID corresponding to the trigger element that causes the picker to open when clicked.
Attribute	`trigger`
Type	`string ｜ undefined`
Default	`undefined`

イベント

Name	Description	Bubbles
`didDismiss`	Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.	`true`
`didPresent`	Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.	`true`
`ionPickerDidDismiss`	Emitted after the picker has dismissed.	`true`
`ionPickerDidPresent`	Emitted after the picker has presented.	`true`
`ionPickerWillDismiss`	Emitted before the picker has dismissed.	`true`
`ionPickerWillPresent`	Emitted before the picker has presented.	`true`
`willDismiss`	Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.	`true`
`willPresent`	Emitted before the picker has presented. Shorthand for ionPickerWillPresent.	`true`

メソッド

dismiss

Description	Dismiss the picker overlay after it has been presented.
Signature	`dismiss(data?: any, role?: string) => Promise<boolean>`

getColumn

Description	Get the column that matches the specified name.
Signature	`getColumn(name: string) => Promise<PickerColumn ｜ undefined>`

onDidDismiss

Description	Returns a promise that resolves when the picker did dismiss.
Signature	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

Description	Returns a promise that resolves when the picker will dismiss.
Signature	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

Description	Present the picker overlay after it has been created.
Signature	`present() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--backdrop-opacity`	Opacity of the backdrop
`--background`	Background of the picker
`--background-rgb`	Background of the picker in rgb format
`--border-color`	Border color of the picker
`--border-radius`	Border radius of the picker
`--border-style`	Border style of the picker
`--border-width`	Border width of the picker
`--height`	Height of the picker
`--max-height`	Maximum height of the picker
`--max-width`	Maximum width of the picker
`--min-height`	Minimum height of the picker
`--min-width`	Minimum width of the picker
`--width`	Width of the picker

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

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

`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