跳至主要内容
版本: v8

ion-loading

范围

一个可以用来指示活动并阻止用户交互的覆盖层。加载指示器显示在应用程序内容之上，可以通过应用程序关闭以恢复用户与应用程序的交互。它包括一个可选的背景，可以通过在创建时设置 `showBackdrop: false` 来禁用。

基本用法​

呈现后，加载指示器默认情况下将无限期显示。开发人员可以在创建后手动关闭加载指示器，方法是在组件上调用 `dismiss()` 方法。`onDidDismiss` 函数可以在加载指示器关闭后执行操作。

或者，开发人员可以通过将要显示的毫秒数传递给加载选项的 `duration` 来配置加载指示器以在特定时间后自动关闭。

控制器​

定制​

微调器​

使用的微调器可以使用 `spinner` 属性进行定制。有关选项的完整列表，请参见 微调器属性文档。

主题​

加载使用范围封装，这意味着它会在运行时自动将每个样式与其附加一个额外的类进行范围化。覆盖 CSS 中的范围选择器需要 更高特异性 选择器。

我们建议传递一个自定义类，并使用它将自定义样式添加到主机和内部元素。

注意

ion-loading 在应用程序的根目录呈现，因此建议将任何 ion-loading 样式放在全局样式表中。

无障碍​

Ionic 会自动将 Loading 的 `role` 设置为 dialog。

如果 Loading 的 `message` 属性已定义，则 `aria-labelledby` 属性将自动设置为消息元素的 ID。否则，`aria-labelledby` 不会设置，开发人员必须使用 `htmlAttributes` 属性提供 `aria-label`。

所有 ARIA 属性都可以通过在 Loading 的 `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。内容默认情况下将作为纯文本解析。在使用自定义 HTML 之前，必须在 Ionic 配置中将 `innerHTMLTemplatesEnabled` 设置为 `true`。
属性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，该元素在单击时会导致加载指示器打开。
属性触发器
类型字符串 ｜ 未定义
默认值未定义

事件​

名称描述冒泡
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。
签名onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss​

描述加载消失时返回一个解析的 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加载对话框的最小宽度
--spinner-color加载旋转器的颜色
--width加载对话框的宽度

插槽​

此组件没有插槽可用。

内容

编辑此页面