跳到主要內容
版本：v8

ion-action-sheet

已加入範圍

操作表單是一個顯示一組選項的對話框。它會顯示在應用程式內容的上方，而且必須由使用者手動關閉，才能繼續與應用程式互動。在 ios 模式中，破壞性選項會清楚顯示。有多種方式可以關閉操作表單，包括點擊背景或在桌面上按下 Esc 鍵。

可以透過直接在範本中撰寫元件來使用 ion-action-sheet。這可以減少您為了呈現操作表單而需要連結的處理常式數量。

使用 isOpen​

開發人員可以使用 ion-action-sheet 上的 isOpen 屬性，從應用程式狀態控制操作表單的呈現狀態。這表示當 isOpen 設定為 true 時，將會呈現操作表單，而當 isOpen 設定為 false 時，將會關閉操作表單。

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

控制器操作表單​

在需要更精確地控制操作表單的呈現和關閉時間時，可以使用 actionSheetController。

按鈕​

按鈕的 role 屬性可以是 destructive 或 cancel。沒有 role 屬性的按鈕將會具有該平台的預設外觀。具有 cancel role 的按鈕無論在陣列中的哪個位置，都會始終載入為底部按鈕。所有其他按鈕將按照它們加入到 buttons 陣列中的順序顯示。注意：我們建議 destructive 按鈕始終是陣列中的第一個按鈕，使其成為頂部按鈕。此外，如果點擊背景關閉操作表單，則會從具有 cancel role 的按鈕觸發處理常式。

也可以透過 ActionSheetButton 上的 data 屬性傳遞資料到按鈕。這會填入 onDidDismiss 方法的回傳值中的 data 欄位。

收集關閉時的角色資訊​

當觸發 didDismiss 事件時，可以使用事件詳細資訊的 data 和 role 欄位，來收集有關如何關閉操作表單的資訊。

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

佈景主題​

操作表單使用範圍封裝，這表示它會在執行階段自動透過附加額外類別，來範圍化其 CSS 的每個樣式。覆寫 CSS 中的範圍選取器需要一個更高的指定性選取器。

樣式​

我們建議在 create 方法中傳遞一個自訂類別到 cssClass，並使用它將自訂樣式加入到主機和內部元素。此屬性也可以接受以空格分隔的多個類別。

/* DOES NOT WORK - not specific enough */
.action-sheet-group {
  background: #e5e5e5;
}

/* Works - pass "my-custom-class" in cssClass to increase specificity */
.my-custom-class .action-sheet-group {
  background: #e5e5e5;
}

CSS 自訂屬性​

任何定義的CSS 自訂屬性都可以用來設定操作表單的樣式，而無需以個別元素為目標。

協助工具​

螢幕閱讀器​

操作表單會設定 aria 屬性，使其可供螢幕閱讀器使用，但如果這些屬性的描述不夠詳細，或與應用程式中使用操作表單的方式不一致，則可以覆寫這些屬性。

角色​

操作表單會被賦予 dialog 的 role。為了符合 ARIA 規範，必須設定 aria-label 或 aria-labelledby 屬性。

操作表單描述​

強烈建議每個操作表單都定義 header 屬性，因為 Ionic 會自動將 aria-labelledby 設定為指向 header 元素。但是，如果您選擇不包含 header，則替代方法是使用 htmlAttributes 屬性來提供描述性的 aria-label 或設定自訂的 aria-labelledby 值。

const actionSheet = await this.actionSheetController.create({
  htmlAttributes: {
    'aria-label': 'action sheet dialog',
  },
});

操作表單按鈕描述​

包含文字的按鈕將會由螢幕閱讀器讀取。如果按鈕僅包含圖示，或者需要文字以外的描述，則應透過將 aria-label 傳遞到按鈕上的 htmlAttributes 屬性來為按鈕指定標籤。

const actionSheet = await this.actionSheetController.create({
  header: 'Header',
  buttons: [
    {
      icon: 'close',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

介面​

ActionSheetButton​

interface ActionSheetButton<T = any> {
  text?: string;
  role?: 'cancel' | 'destructive' | 'selected' | string;
  icon?: string;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
  handler?: () => boolean | void | Promise<boolean | void>;
  data?: T;
}

ActionSheetOptions​

interface ActionSheetOptions {
  header?: string;
  subHeader?: string;
  cssClass?: string | string[];
  buttons: (ActionSheetButton | string)[];
  backdropDismiss?: boolean;
  translucent?: 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
類型(string ｜ ActionSheetButton<any>)[]
預設值[]

cssClass​

描述要套用的額外類別以進行自訂 CSS。如果提供多個類別，則應以空格分隔。
屬性css-class
類型string ｜ string[] ｜ undefined
預設值undefined

enterAnimation​

描述在顯示動作選單時使用的動畫效果。
屬性undefined
類型((baseEl: any, opts?: any) => Animation) ｜ undefined
預設值undefined
描述動作選單的標題。
屬性header
類型string ｜ undefined
預設值undefined

htmlAttributes​

描述要傳遞給動作選單的額外屬性。
屬性undefined
類型undefined ｜ { [key: string]: any; }
預設值undefined

isOpen​

描述如果為 true，動作選單將會開啟。如果為 false，動作選單將會關閉。如果您需要更精細的呈現控制，請使用此屬性，否則只需使用 actionSheetController 或 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

subHeader​

描述動作選單的副標題。
屬性sub-header
類型string ｜ undefined
預設值undefined

translucent​

描述如果為 true，動作選單將會是半透明的。僅當模式為 "ios" 且裝置支援 backdrop-filter 時適用。
屬性translucent
類型boolean
預設值false

trigger​

描述與觸發元素對應的 ID，當點擊時會導致動作選單開啟。
屬性trigger
類型string ｜ undefined
預設值undefined

事件​

名稱描述冒泡
didDismiss在動作選單關閉後發出。為 ionActionSheetDidDismiss 的簡寫。true
didPresent在動作選單顯示後發出。為 ionActionSheetWillDismiss 的簡寫。true
ionActionSheetDidDismiss在動作選單關閉後發出。true
ionActionSheetDidPresent在動作選單顯示後發出。true
ionActionSheetWillDismiss在動作選單關閉前發出。true
ionActionSheetWillPresent在動作選單顯示前發出。true
willDismiss在動作選單關閉前發出。為 ionActionSheetWillDismiss 的簡寫。true
willPresent在動作選單顯示前發出。為 ionActionSheetWillPresent 的簡寫。true

方法​

dismiss​

描述在動作選單顯示後關閉覆蓋層。
簽名dismiss(data?: any, role?: string) => Promise<boolean>

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 自訂屬性​

名稱描述
--backdrop-opacity背景的透明度
--background動作選單群組的背景
--button-background動作選單按鈕的背景
--button-background-activated按下時動作選單按鈕的背景。注意：設定此值會干擾 Material Design 的漣漪效果。
--button-background-activated-opacity按下時動作選單按鈕背景的透明度
--button-background-focused使用 Tab 鍵選取時動作選單按鈕的背景
--button-background-focused-opacity使用 Tab 鍵選取時動作選單按鈕背景的透明度
--button-background-hover滑鼠懸停時動作選單按鈕的背景
--button-background-hover-opacity滑鼠懸停時動作選單按鈕背景的透明度
--button-background-selected所選取動作選單按鈕的背景
--button-background-selected-opacity所選取動作選單按鈕背景的透明度
--button-color動作選單按鈕的顏色
--button-color-activated按下時動作選單按鈕的顏色
--button-color-disabled停用時所選取動作選單按鈕的顏色
--button-color-focused使用 Tab 鍵選取時動作選單按鈕的顏色
--button-color-hover滑鼠懸停時動作選單按鈕的顏色
--button-color-selected所選取動作選單按鈕的顏色
--color動作選單文字的顏色
--height動作選單的高度
--max-height動作選單的最大高度
--max-width動作選單的最大寬度
--min-height動作選單的最小高度
--min-width動作選單的最小寬度
--width動作選單的寬度

插槽​

此元件沒有可用的插槽。

目錄

編輯此頁面