ion-picker-legacy

scoped

弃用说明

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

Picker 是一个对话框，显示一行按钮及其下方的列。它显示在应用内容上方、视口底部。

内联 Picker（推荐）

ion-picker-legacy 可以通过直接在模板中编写组件来使用。这减少了呈现 Picker 时需要连接的处理程序数量。

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

使用 isOpen

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

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

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

控制器 Picker

在需要对 Picker 的呈现和关闭进行更多控制的情况下，可以使用 pickerController。

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

多列

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

控制台

控制台消息将在上方示例中调用 console.log 时显示在此处。

接口

PickerButton

interface PickerButton {
  text?: string;
  role?: string;
  cssClass?: string | string[];
  handler?: (value: any) => boolean | void;
}

PickerColumn

interface PickerColumn {
  name: string;
  align?: string;
  /**
   * 更改此值可以设置选择器列的初始值。
   */
  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;
  /**
   * 要分配给选择器列选项的 aria-label 的可选文本。
   */
  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

说明	If true, the picker will animate.
属性	animated
类型	boolean
默认值	true

backdropDismiss

说明	If true, the picker will be dismissed when the backdrop is clicked.
属性	backdrop-dismiss
类型	boolean
默认值	true

buttons

说明	Array of buttons to be displayed at the top of the picker.
属性	undefined
类型	PickerButton[]
默认值	[]

columns

说明	Array of columns to be displayed in the picker.
属性	undefined
类型	PickerColumn[]
默认值	[]

cssClass

说明	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
属性	css-class
类型	string ｜ string[] ｜ undefined
默认值	undefined

duration

说明	Number of milliseconds to wait before dismissing the picker.
属性	duration
类型	number
默认值	0

enterAnimation

说明	Animation to use when the picker is presented.
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认值	undefined

htmlAttributes

说明	Additional attributes to pass to the picker.
属性	undefined
类型	undefined ｜ { [key: string]: any; }
默认值	undefined

isOpen

说明	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.
属性	is-open
类型	boolean
默认值	false

keyboardClose

说明	If true, the keyboard will be automatically dismissed when the overlay is presented.
属性	keyboard-close
类型	boolean
默认值	true

leaveAnimation

说明	Animation to use when the picker is dismissed.
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认值	undefined

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	mode
类型	"ios" ｜ "md"
默认值	undefined

showBackdrop

说明	If true, a backdrop will be displayed behind the picker.
属性	show-backdrop
类型	boolean
默认值	true

trigger

说明	An ID corresponding to the trigger element that causes the picker to open when clicked.
属性	trigger
类型	string ｜ undefined
默认值	undefined

事件

Name	说明	冒泡
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

说明	Dismiss the picker overlay after it has been presented.
签名	dismiss(data?: any, role?: string) => Promise<boolean>
参数	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

说明	Get the column that matches the specified name.
签名	getColumn(name: string) => Promise<PickerColumn ｜ undefined>
参数	name: The name of the column.

onDidDismiss

说明	Returns a promise that resolves when the picker did dismiss.
签名	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

说明	Returns a promise that resolves when the picker will dismiss.
签名	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

说明	Present the picker overlay after it has been created.
签名	present() => Promise<void>

CSS Shadow Parts

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

iOS

Name	说明
--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

MD

Name	说明
--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

插槽

该组件没有可用的插槽。