ion-picker-legacy

已限定範圍

已棄用通知

ion-picker-legacy 已被棄用，並將在下一個主要版本中移除。請盡快遷移至 ion-picker。

選擇器是一個對話框，會在底部顯示一排按鈕和欄位。它會顯示在應用程式內容之上和視窗的底部。

內嵌選擇器（推薦）

可以透過在樣板中直接撰寫元件來使用 ion-picker-legacy。這樣可以減少您需要連線才能顯示選擇器的處理常式數量。

主控台

當從上方範例記錄時，主控台訊息將會顯示在這裡。

使用 isOpen

ion-picker-legacy 上的 isOpen 屬性可讓開發人員從應用程式狀態控制選擇器的呈現狀態。這表示當 isOpen 設定為 true 時，將會顯示選擇器；當 isOpen 設定為 false 時，將會關閉選擇器。

isOpen 使用單向資料繫結，這表示當選擇器關閉時，不會自動設定回 false。開發人員應該監聽 ionPickerDidDismiss 或 didDismiss 事件，並將 isOpen 設定為 false。這樣做的原因是要避免 ion-picker 的內部與應用程式狀態緊密耦合。透過單向資料繫結，選擇器只需要關注反應變數提供的布林值。透過雙向資料繫結，選擇器需要關注布林值以及反應變數本身的存在。這可能會導致非決定性的行為，並使應用程式更難除錯。

主控台

當從上方範例記錄時，主控台訊息將會顯示在這裡。

控制器選擇器

在需要更多控制何時顯示和關閉選擇器的情況下，可以使用 pickerController。

主控台

當從上方範例記錄時，主控台訊息將會顯示在這裡。

多個欄位

可以使用 columns 屬性來顯示具有多個不同選項欄位的選擇器。

主控台

當從上方範例記錄時，主控台訊息將會顯示在這裡。

介面

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，該 Promise 在選取器關閉後解析。
簽章	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

描述	返回一個 Promise，該 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	選取器的寬度

插槽

此元件沒有可用的插槽。