ion-picker-legacy

作用域

弃用通知

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

Picker 是一个对话框，它显示一行按钮和下面的列。它出现在应用程序内容的顶部，以及视窗的底部。

内联选择器（推荐）

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

控制台

从上面的示例中记录的控制台消息将显示在此处。

使用 isOpen

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

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

控制台

从上面的示例中记录的控制台消息将显示在此处。

控制器选择器

pickerController 可用于需要更多控制何时呈现和关闭 Picker 的情况下。

控制台

从上面的示例中记录的控制台消息将显示在此处。

多列

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

控制台

从上面的示例中记录的控制台消息将显示在此处。

接口

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

属性

animated

描述	如果为 true，选择器将进行动画处理。
属性	animated
类型	boolean
默认	true

backdropDismiss

描述	如果为 true，当点击背景时，选择器将被关闭。
属性	backdrop-dismiss
类型	boolean
默认	true

buttons

描述	要显示在选择器顶部的按钮数组。
属性	undefined
类型	PickerButton[]
默认	[]

columns

描述	要在选择器中显示的列数组。
属性	undefined
类型	PickerColumn[]
默认	[]

cssClass

描述	要应用于自定义 CSS 的附加类。如果提供多个类，则应使用空格分隔它们。
属性	css-class
类型	string ｜ string[] ｜ undefined
默认	undefined

duration

描述	关闭选择器之前等待的毫秒数。
属性	duration
类型	number
默认	0

enterAnimation

描述	呈现选择器时要使用的动画。
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认	undefined

htmlAttributes

描述	要传递给选择器的附加属性。
属性	undefined
类型	undefined ｜ { [key: string]: any; }
默认	undefined

isOpen

描述	如果为 true，选择器将打开。如果为 false，选择器将关闭。如果你需要对呈现进行更细粒度的控制，请使用此属性，否则只使用 pickerController 或 trigger 属性。注意：当选择器关闭时，isOpen 不会自动设置为 false。你需要在你的代码中执行此操作。
属性	is-open
类型	boolean
默认	false

keyboardClose

描述	如果为 true，当呈现叠加层时，键盘将自动关闭。
属性	keyboard-close
类型	boolean
默认	true

leaveAnimation

描述	关闭选择器时要使用的动画。
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认	undefined

mode

描述	模式决定使用哪个平台样式。
属性	mode
类型	"ios" ｜ "md"
默认	undefined

showBackdrop

描述	如果为 true，选择器后面将显示一个背景。
属性	show-backdrop
类型	boolean
默认	true

trigger

描述	对应于触发元素的 ID，该元素在被点击时会导致选择器打开。
属性	trigger
类型	string ｜ undefined
默认	undefined

事件

名称	描述	冒泡
didDismiss	选择器关闭后发出。ionPickerDidDismiss 的简写。	true
didPresent	选择器呈现后发出。ionPickerWillDismiss 的简写。	true
ionPickerDidDismiss	选择器关闭后发出。	true
ionPickerDidPresent	选择器呈现后发出。	true
ionPickerWillDismiss	选择器关闭之前发出。	true
ionPickerWillPresent	选择器呈现之前发出。	true
willDismiss	选择器关闭之前发出。ionPickerWillDismiss 的简写。	true
willPresent	选择器呈现之前发出。ionPickerWillPresent 的简写。	true

方法

dismiss

描述	选择器在呈现后关闭叠加层。
签名	dismiss(data?: any, role?: string) => Promise<boolean>

getColumn

描述	获取与指定名称匹配的列。
签名	getColumn(name: string) => Promise<PickerColumn ｜ undefined>

onDidDismiss

描述	返回一个在选择器消失时解析的 Promise。
签名	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

描述	返回一个在选择器将要消失时解析的 Promise。
签名	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

描述	在创建选择器叠加层后显示它。
签名	present() => Promise<void>

CSS 阴影部分

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

CSS 自定义属性

iOS

名称	描述
--backdrop-opacity	背景的透明度
--background	选择器的背景
--background-rgb	选择器的背景（rgb 格式）
--border-color	选择器的边框颜色
--border-radius	选择器的边框圆角
--border-style	选择器的边框样式
--border-width	选择器的边框宽度
--height	选择器的高度
--max-height	选择器的最大高度
--max-width	选择器的最大宽度
--min-height	选择器的最小高度
--min-width	选择器的最小宽度
--width	选择器的宽度

MD

名称	描述
--backdrop-opacity	背景的透明度
--background	选择器的背景
--background-rgb	选择器的背景（rgb 格式）
--border-color	选择器的边框颜色
--border-radius	选择器的边框圆角
--border-style	选择器的边框样式
--border-width	选择器的边框宽度
--height	选择器的高度
--max-height	选择器的最大高度
--max-width	选择器的最大宽度
--min-height	选择器的最小高度
--min-width	选择器的最小宽度
--width	选择器的宽度

插槽

此组件没有可用的插槽。