ion-picker-legacy

弃用通知

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

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

🌐 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 可以通过在模板中直接编写组件来使用。这减少了你需要连接的处理程序数量，从而渲染选择器。

Console

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

使用 `isOpen`

🌐 Using isOpen

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

🌐 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 使用单向数据绑定，这意味着在 Picker 关闭时它不会自动设置为 false。开发者应监听 ionPickerDidDismiss 或 didDismiss 事件，并将 isOpen 设置为 false。这样做的原因是，它可以防止 ion-picker 的内部逻辑与应用状态紧密耦合。使用单向数据绑定时，Picker 只需关心响应式变量提供的布尔值。使用双向数据绑定时，Picker 需要同时关心布尔值以及响应式变量本身的存在。这可能导致不可预测的行为，并使应用更难调试。

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. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
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>`
Parameters	data: Any data to emit in the dismiss events. role: The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`,` "destructive"`, "selected"`, and `"backdrop"`.

getColumn

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

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 自定义属性

插槽