ion-loading

已設定範圍

一個可以用來指示活動的覆蓋層，同時會阻擋使用者互動。載入指示器會顯示在應用程式內容的上方，且可由應用程式關閉，以恢復使用者與應用程式的互動。它包含一個可選的背景，可以在建立時設定 `showBackdrop: false` 來停用。

基本用法

一旦呈現，載入指示器預設會無限期顯示。開發人員可以在建立後透過呼叫元件上的 `dismiss()` 方法手動關閉載入指示器。可以呼叫 `onDidDismiss` 函式，在載入指示器關閉後執行動作。

或者，開發人員可以透過將要顯示的毫秒數傳遞至載入選項的 `duration` 中，將載入指示器設定為在特定時間後自動關閉。

內嵌（推薦）

控制器

自訂

旋轉器

可以使用 `spinner` 屬性自訂所使用的旋轉器。如需完整選項清單，請參閱 旋轉器屬性文件。

主題化

載入使用範圍封裝，這表示它會透過在執行階段將每個樣式附加額外的類別來自動設定其 CSS 的範圍。覆寫 CSS 中已設定範圍的選取器需要更高的特異性選取器。

我們建議傳遞自訂類別，並使用它將自訂樣式新增至主機和內部元素。

注意

`ion-loading` 會顯示在您應用程式的根目錄，因此我們建議將任何 `ion-loading` 樣式放在全域樣式表單中。

協助工具

Ionic 會自動將載入的 `role` 設定為 `dialog`。

如果為載入定義了 `message` 屬性，則 `aria-labelledby` 屬性會自動設定為訊息元素的 ID。否則，不會設定 `aria-labelledby`，且開發人員必須使用 `htmlAttributes` 屬性提供 `aria-label`。

所有 ARIA 屬性都可以透過在載入的 `htmlAttributes` 屬性中定義自訂值來手動覆寫。

介面

LoadingOptions

interface LoadingOptions {
  spinner?: SpinnerTypes | null;
  message?: string | IonicSafeString;
  cssClass?: string | string[];
  showBackdrop?: boolean;
  duration?: number;
  translucent?: boolean;
  animated?: boolean;
  backdropDismiss?: boolean;
  mode?: Mode;
  keyboardClose?: boolean;
  id?: string;
  htmlAttributes?: { [key: string]: any };

  enterAnimation?: AnimationBuilder;
  leaveAnimation?: AnimationBuilder;
}

屬性

animated

描述	如果為 `true`，則載入指示器會產生動畫效果。
屬性	animated
類型	布林值
預設值	true

backdropDismiss

描述	如果為 `true`，則當點擊背景時，載入指示器將會關閉。
屬性	backdrop-dismiss
類型	布林值
預設值	false

cssClass

描述	要套用以自訂 CSS 的其他類別。如果提供多個類別，則應以空格分隔。
屬性	css-class
類型	字串｜字串[]｜未定義
預設值	未定義

duration

描述	關閉載入指示器前要等待的毫秒數。
屬性	duration
類型	數字
預設值	0

enterAnimation

描述	呈現載入指示器時要使用的動畫。
屬性	未定義
類型	((baseEl: any, opts?: any) => Animation) | 未定義
預設值	未定義

htmlAttributes

描述	要傳遞至載入器的其他屬性。
屬性	未定義
類型	未定義｜{ [key: string]: any; }
預設值	未定義

isOpen

描述	如果為 `true`，則載入指示器將會開啟。如果為 `false`，則載入指示器將會關閉。如果需要更精細地控制呈現，請使用此選項，否則請僅使用 loadingController 或 `trigger` 屬性。請注意：當載入指示器關閉時，`isOpen` 不會自動設定回 `false`。您需要在程式碼中執行此動作。
屬性	is-open
類型	布林值
預設值	false

keyboardClose

描述	如果為 `true`，則在呈現覆蓋層時會自動關閉鍵盤。
屬性	keyboard-close
類型	布林值
預設值	true

leaveAnimation

描述	關閉載入指示器時要使用的動畫。
屬性	未定義
類型	((baseEl: any, opts?: any) => Animation) | 未定義
預設值	未定義

message

描述	要在載入指示器中顯示的可選文字內容。 此屬性接受自訂 HTML 字串。預設會將內容剖析為純文字。必須先在 Ionic 設定中將 `innerHTMLTemplatesEnabled` 設定為 `true`，才能使用自訂 HTML。
屬性	message
類型	IonicSafeString｜字串｜未定義
預設值	未定義

mode

描述	模式決定要使用哪個平台樣式。
屬性	mode
類型	"ios"｜"md"
預設值	未定義

showBackdrop

描述	如果為 `true`，則會在載入指示器後面顯示背景。
屬性	show-backdrop
類型	布林值
預設值	true

spinner

描述	要顯示的旋轉器名稱。
屬性	spinner
類型	"bubbles"｜"circles"｜"circular"｜"crescent"｜"dots"｜"lines"｜"lines-sharp"｜"lines-sharp-small"｜"lines-small"｜null｜未定義
預設值	未定義

translucent

描述	如果為 `true`，則載入指示器會是半透明的。僅當模式為 `“ios”` 且裝置支援 `backdrop-filter` 時套用。
屬性	translucent
類型	布林值
預設值	false

trigger

描述	對應於觸發元素 (當點擊時會導致載入指示器開啟) 的 ID。
屬性	trigger
類型	字串｜未定義
預設值	未定義

事件

名稱	描述	泡泡
didDismiss	在載入指示器關閉後發出。是 ionLoadingDidDismiss 的縮寫。	true
didPresent	在載入指示器呈現後發出。是 ionLoadingWillDismiss 的縮寫。	true
ionLoadingDidDismiss	在載入已關閉後發出。	true
ionLoadingDidPresent	載入畫面呈現後觸發。	true
ionLoadingWillDismiss	載入畫面即將關閉前觸發。	true
ionLoadingWillPresent	載入畫面即將呈現前觸發。	true
willDismiss	載入指示器即將關閉前觸發。為 ionLoadingWillDismiss 的簡寫。	true
willPresent	載入指示器即將呈現前觸發。為 ionLoadingWillPresent 的簡寫。	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 自訂屬性

iOS

名稱	描述
--backdrop-opacity	背景幕的透明度
--background	載入對話框的背景
--height	載入對話框的高度
--max-height	載入對話框的最大高度
--max-width	載入對話框的最大寬度
--min-height	載入對話框的最小高度
--min-width	載入對話框的最小寬度
--spinner-color	載入指示器的顏色
--width	載入對話框的寬度

MD

名稱	描述
--backdrop-opacity	背景幕的透明度
--background	載入對話框的背景
--height	載入對話框的高度
--max-height	載入對話框的最大高度
--max-width	載入對話框的最大寬度
--min-height	載入對話框的最小高度
--min-width	載入對話框的最小寬度
--spinner-color	載入指示器的顏色
--width	載入對話框的寬度

插槽

此元件沒有可用的插槽。