ion-picker

scoped

选择器（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.

控制器选择器

在需要更多控制选择器显示和关闭时机的情况下，可以使用 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.

接口

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

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

事件

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>
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". 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

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

插槽

No slots available for this component.