ion-picker
Picker 會顯示一個或多個包含選項的欄，供使用者選擇。
前綴和後綴內容
使用 prefix 和 suffix 插槽將其他內容新增至選擇器。
主題
CSS 變數
可以使用 ion-picker 上的 CSS 變數自訂選擇器醒目提示和淡化。開發人員可以藉由直接設定 ion-picker-column-options 的樣式並使用主機層級樣式來自訂其個別外觀。
模式視窗中的選擇器
選擇器可以顯示在覆蓋層內，例如 ion-modal，以建立具有確認或取消按鈕的選擇器體驗。
主控台從以上範例記錄時，主控台訊息會顯示在這裡。協助工具
螢幕閱讀器
選擇器透過在每個 Picker 欄 上實作 slider 角色來支援使用螢幕閱讀器進行導覽。下列手勢可用來導覽選擇器。
| 手勢 | 功能 |
|---|---|
| 向左滑動 | 將焦點移至上一個選擇器欄。 |
| 向右滑動 | 將焦點移至下一個選擇器欄。 |
| 向上滑動 | 選取選擇器欄中的下一個選項。 |
| 向下滑動 | 選取選擇器欄中的上一個選項。 |
| 點擊兩下並向上/向下滑動 | 調整選擇器欄中選取的選項。可以做為向上和向下滑動的替代方式。 |
注意
向上滑動和向下滑動手勢依賴於正確的鍵盤事件合成，如 slider 文件中所述。以 Chromium 為基礎的瀏覽器無法正確合成鍵盤事件，但在以 Chromium 為基礎的瀏覽器中實作之前，「點擊兩下並向上/向下滑動」手勢可以用作替代方式。
鍵盤互動
當有焦點時，可以使用鍵盤導覽每個 Picker 欄。
| 按鍵 | 描述 |
|---|---|
| ArrowUp | 捲動至上一個選項。 |
| ArrowDown | 捲動至下一個選項。 |
| PageUp | 向上捲動超過一個選項。 |
| PageDown | 向下捲動超過一個選項。 |
| Home | 捲動至第一個選項。 |
| End | 捲動至最後一個選項。 |
屬性
模式
| 描述 | 模式決定要使用哪個平台樣式。 |
| 屬性 | 模式 |
| 類型 | "ios" ｜ "md" |
| 預設值 | 未定義 |
事件
此元件沒有可用的事件。
方法
此元件沒有可用的公用方法。
CSS 陰影部分
此元件沒有可用的 CSS 陰影部分。
CSS 自訂屬性
- iOS
- MD
| 名稱 | 描述 |
|---|---|
--fade-background-rgb | 以 rgb 格式顯示涵蓋非選取項目的漸層背景 |
--highlight-background | 選取項目之選擇器醒目提示的背景 |
--highlight-border-radius | 選取項目之選擇器醒目提示的邊框半徑 |
| 名稱 | 描述 |
|---|---|
--fade-background-rgb | 以 rgb 格式顯示涵蓋非選取項目的漸層背景 |
--highlight-background | 選取項目之選擇器醒目提示的背景 |
--highlight-border-radius | 選取項目之選擇器醒目提示的邊框半徑 |
插槽
此元件沒有可用的插槽。