ion-picker-legacy

scoped

弃用通知

ion-picker-legacy 已弃用，并将在下一个主要版本中删除。尽快迁移到 ion-picker。

¥ion-picker-legacy is deprecated and will be removed in the next major release. Migrate to ion-picker as soon as possible.

选择器是一个对话框，下面显示一行按钮和列。它出现在应用内容的顶部和视口的底部。

¥A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.

内联选择器（推荐）

¥Inline Pickers (Recommended)

可以通过直接在模板中编写组件来使用 ion-picker-legacy。这减少了为了显示选取器而需要连接的处理程序的数量。

¥ion-picker-legacy can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Picker.

Console

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

使用 `isOpen`

¥Using isOpen

ion-picker-legacy 上的 isOpen 属性允许开发者从其应用状态控制选取器的渲染状态。这意味着当 isOpen 设置为 true 时，将显示选取器，而当 isOpen 设置为 false 时，将关闭选取器。

¥The isOpen property on ion-picker-legacy allows developers to control the presentation state of the Picker from their application state. This means when isOpen is set to true the Picker will be presented, and when isOpen is set to false the Picker will be dismissed.

isOpen 使用单向数据绑定，这意味着当选取器关闭时，它不会自动设置为 false。开发者应该监听 ionPickerDidDismiss 或 didDismiss 事件并将 isOpen 设置为 false。这样做的原因是它阻止了 ion-picker 的内部与应用的状态紧密耦合。通过单向数据绑定，选择器只需要关心反应变量提供的布尔值。对于双向数据绑定，选择器需要关注布尔值以及反应变量本身的存在。这可能会导致不确定的行为并使应用更难以调试。

¥isOpen uses a one-way data binding, meaning it will not automatically be set to false when the Picker is dismissed. Developers should listen for the ionPickerDidDismiss or didDismiss event and set isOpen to false. The reason for this is it prevents the internals of ion-picker from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.

Console

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

控制器选择器

¥Controller Pickers

pickerController 可用于需要对选择器何时显示和消失进行更多控制的情况。

¥The pickerController can be used in situations where more control is needed over when the Picker is presented and dismissed.

Console

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

多列

¥Multiple Columns

columns 属性可用于显示具有多列不同选项的选取器。

¥The columns property can be used to display a Picker with multiple columns of different options.

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

属性

¥Properties

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`

事件

¥Events

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`

方法

¥Methods

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 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

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

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​

控制器选择器​

多列​

接口​

PickerButton​

PickerColumn​

PickerColumnOption​

PickerOptions​

属性​

animated​

backdropDismiss​

buttons​

columns​

cssClass​

duration​

enterAnimation​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

mode​

showBackdrop​

trigger​

事件​

方法​

dismiss​

getColumn​

onDidDismiss​

onWillDismiss​

present​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

内联选择器（推荐）

使用 `isOpen`

控制器选择器

多列

接口

PickerButton

PickerColumn

PickerColumnOption

PickerOptions

属性

animated

backdropDismiss

buttons

columns

cssClass

duration

enterAnimation

htmlAttributes

isOpen

keyboardClose

leaveAnimation

mode

showBackdrop

trigger

事件

方法

dismiss

getColumn

onDidDismiss

onWillDismiss

present

CSS 阴影部分

CSS 自定义属性

插槽