跳轉至主要內容
版本：v8

ion-alert

作用域

警報是一個對話方塊，用於向使用者顯示資訊或使用輸入從使用者收集資訊。警報顯示在應用程式內容的頂部，使用者必須手動關閉警報才能恢復與應用程式的互動。它還可以選擇性地包含 `header`、`subHeader` 和 `message`。

可以在模板中直接編寫組件來使用 `ion-alert`。這減少了需要連線的處理程式數量以呈現警報。

使用 `isOpen`​

`ion-alert` 上的 `isOpen` 屬性允許開發人員從應用程式狀態控制警報的呈現狀態。這意味著當 `isOpen` 設置為 `true` 時，警報將被呈現；當 `isOpen` 設置為 `false` 時，警報將被關閉。

`isOpen` 使用單向資料綁定，這意味著當警報關閉時，它不會自動設置為 `false`。開發人員應該監聽 `ionAlertDidDismiss` 或 `didDismiss` 事件，並將 `isOpen` 設置為 `false`。這樣做是因為它防止 `ion-alert` 的內部與應用程式狀態緊密耦合。使用單向資料綁定，警報只需要關心反應性變數提供的布林值。使用雙向資料綁定，警報需要關心布林值以及反應性變數本身的存在。這可能導致非確定性行為，並使應用程式更難調試。

控制器警報​

當需要對警報何時呈現和關閉進行更多控制時，可以使用 `alertController`。

按鈕​

在 `buttons` 陣列中，每個按鈕都包含其 `text` 的屬性，以及可選的 `handler`。如果處理程式返回 `false`，則單擊按鈕時警報不會自動關閉。所有按鈕將按它們添加到 `buttons` 陣列中的順序從左到右顯示。注意：最右邊的按鈕（陣列中的最後一個）是主按鈕。

可選地，可以將 `role` 屬性添加到按鈕中，例如 `cancel`。如果 `cancel` 角色在其中一個按鈕上，則如果警報通過點擊背景關閉，則它將觸發具有取消角色的按鈕的處理程式。

主控台
主控台訊息將在從上面示例中記錄時在此處顯示。

輸入​

警報還可以包含幾個不同的輸入，其資料可以傳回應用程式。輸入可以用作提示使用者提供資訊的簡單方法。單選按鈕、核取方塊和文字輸入都可接受，但不能混合使用。例如，一個警報可以包含所有單選按鈕輸入，或所有核取方塊輸入，但同一個警報不能混合使用單選按鈕和核取方塊輸入。但是請注意，不同的“文字”輸入類型可以混合使用，例如 `url`、`email`、`text`、`textarea` 等。如果需要一個不符合警報指南的複雜表單 UI，則建議在模式中構建表單。

文字輸入示例​

單選按鈕示例​

自定義​

警報使用作用域封裝，這意味著它將通過在執行時將每個樣式附加一個額外的類來自動作用域其 CSS。在 CSS 中覆蓋作用域選擇器需要一個具有更高特異性的選擇器。

建議將自定義類傳遞給 `create` 方法中的 `cssClass`，並使用它將自定義樣式添加到主機和內部元素。此屬性也可以接受用空格分隔的多個類。

/* DOES NOT WORK - not specific enough */
.alert-wrapper {
  background: #e5e5e5;
}

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

可以使用任何已定義的CSS 自定義屬性 來樣式化警報，而無需定位單個元素

.my-custom-class {
  --background: #e5e5e5;
}
注意

如果你正在構建 Ionic Angular 應用程式，則需要將樣式添加到全局樣式表檔案中。

無障礙性​

螢幕閱讀器​

警報設置 aria 屬性以對螢幕閱讀器可訪問，但如果這些屬性不夠描述性或與警報在應用程式中的使用方式不符，則可以覆蓋這些屬性。

角色​

Ionic 自動將警報的 `role` 設置為`alertdialog`（如果有任何輸入或按鈕包含在內），或`alert`（如果沒有）。

警報說明​

如果為警報定義了 `header` 屬性，則 `aria-labelledby` 屬性將自動設置為標題的 ID。如果未定義 `header`，則 `subHeader` 元素將用作後備。同樣，如果定義了 `message` 屬性，則 `aria-describedby` 屬性將自動設置為 `message` 元素的 ID。

強烈建議警報包含 `message`，以及 `header` 或 `subHeader`，以符合 ARIA 規範。如果選擇不包含 `header` 或 `subHeader`，則可以使用 `htmlAttributes` 屬性提供描述性的 `aria-label` 作為替代。

const alert = await this.alertController.create({
  message: 'This is an alert with custom aria attributes.',
  htmlAttributes: {
    'aria-label': 'alert dialog',
  },
});

所有 ARIA 屬性都可以通過在警報的 `htmlAttributes` 屬性中定義自定義值來手動覆蓋。

警報按鈕說明​

包含文字的按鈕將由螢幕閱讀器朗讀。如果需要除了現有文字以外的說明，則可以通過將 `aria-label` 傳遞給按鈕的 `htmlAttributes` 屬性，在按鈕上設置標籤。

const alert = await this.alertController.create({
  header: 'Header',
  buttons: [
    {
      text: 'Exit',
      htmlAttributes: {
        'aria-label': 'close',
      },
    },
  ],
});

介面​

AlertButton​

type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };

interface AlertButton {
  text: string;
  role?: 'cancel' | 'destructive' | string;
  cssClass?: string | string[];
  id?: string;
  htmlAttributes?: { [key: string]: any };
  handler?: (value: any) => AlertButtonOverlayHandler | Promise<AlertButtonOverlayHandler>;
}

AlertInput​

interface AlertInput {
  type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea';
  name?: string;
  placeholder?: string;
  value?: any;
  /**
   * The label text to display next to the input, if the input type is `radio` or `checkbox`.
   */
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  id?: string;
  handler?: (input: AlertInput) => void;
  min?: string | number;
  max?: string | number;
  cssClass?: string | string[];
  attributes?: { [key: string]: any };
  tabindex?: number;
}

AlertOptions​

interface AlertOptions {
  header?: string;
  subHeader?: string;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  inputs?: AlertInput[];
  buttons?: (AlertButton | string)[];
  backdropDismiss?: boolean;
  translucent?: boolean;
  animated?: boolean;
  htmlAttributes?: { [key: string]: any };

  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

属性​

animated​

描述如果 true，警报将进行动画。
属性animated
类型boolean
默认值true

backdropDismiss​

描述如果 true，点击背景层将关闭警报。
属性backdrop-dismiss
类型boolean
默认值true

buttons​

描述要添加到警报的按钮数组。
属性undefined
类型(string ｜ AlertButton)[]
默认值[]

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

inputs​

描述要在警报中显示的输入数组。
属性undefined
类型AlertInput[]
默认值[]

isOpen​

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

keyboardClose​

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

leaveAnimation​

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

message​

描述要显示在警报中的主要消息。message 可以接受纯文本或 HTML 作为字符串。要正常显示为 HTML 保留的字符，必须对其进行转义。例如，<Ionic> 将变为 &lt;Ionic&gt;

更多信息：安全文档

此属性接受作为字符串的自定义 HTML。默认情况下，内容被解析为纯文本。innerHTMLTemplatesEnabled 必须在 Ionic 配置中设置为 true，才能使用自定义 HTML。
属性message
类型IonicSafeString ｜ string ｜ 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警报关闭后发出。是 ionAlertDidDismiss 的简写。true
didPresent警报呈现后发出。是 ionAlertWillDismiss 的简写。true
ionAlertDidDismiss警报关闭后发出。true
ionAlertDidPresent警报呈现后发出。true
ionAlertWillDismiss警报关闭前发出。true
ionAlertWillPresent警报呈现前发出。true
willDismiss警报关闭前发出。是 ionAlertWillDismiss 的简写。true
willPresent警报呈现前发出。是 ionAlertWillPresent 的简写。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警报的背景
--height警报的高度
--max-height警报的最大高度
--max-width警报的最大宽度
--min-height警报的最小高度
--min-width警报的最小宽度
--width警报的宽度

插槽​

此组件没有插槽。

内容

编辑此页面