ion-picker

scoped

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

内联选择器（推荐）

ion-picker 可以直接在模板中编写组件来使用。这减少了你需要连接以呈现选择器的处理程序数量。

控制台

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

使用 isOpen

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

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

控制台

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

控制器选择器

在需要对选择器的呈现和关闭有更多控制的场景下，可以使用 pickerController。

控制台

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

多列

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

控制台

控制台消息将在上方示例中调用 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". This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the remove method.

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

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

CSS 自定义属性

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

插槽

该组件没有可用的插槽。