ion-loading

scoped

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

基本用法

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

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

内联（推荐）

控制器

自定义

旋转器

使用的旋转器可以使用 spinner 属性进行自定义。有关完整选项列表，请参阅旋转器属性文档。

主题

Loading 使用 scoped 封装，这意味着它会在运行时通过为每个样式追加额外类来自动限定 CSS 作用域。在 CSS 中覆盖 scoped 选择器需要更高的特异性选择器。

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

备注

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

说明	If true, the loading indicator will animate.
属性	animated
类型	boolean
默认值	true

backdropDismiss

说明	If true, the loading indicator will be dismissed when the backdrop is clicked.
属性	backdrop-dismiss
类型	boolean
默认值	false

cssClass

说明	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
属性	css-class
类型	string ｜ string[] ｜ undefined
默认值	undefined

duration

说明	Number of milliseconds to wait before dismissing the loading indicator.
属性	duration
类型	number
默认值	0

enterAnimation

说明	Animation to use when the loading indicator is presented.
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认值	undefined

htmlAttributes

说明	Additional attributes to pass to the loader.
属性	undefined
类型	undefined ｜ { [key: string]: any; }
默认值	undefined

isOpen

说明	If true, the loading indicator will open. If false, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the trigger property. Note: isOpen will not automatically be set back to false when the loading indicator dismisses. You will need to do that in your code.
属性	is-open
类型	boolean
默认值	false

keyboardClose

说明	If true, the keyboard will be automatically dismissed when the overlay is presented.
属性	keyboard-close
类型	boolean
默认值	true

leaveAnimation

说明	Animation to use when the loading indicator is dismissed.
属性	undefined
类型	((baseEl: any, opts?: any) => Animation) ｜ undefined
默认值	undefined

message

说明	Optional text content to display in the loading indicator. This property accepts custom HTML as a string. Content is parsed as plaintext by default. innerHTMLTemplatesEnabled must be set to true in the Ionic config before custom HTML can be used.
属性	message
类型	IonicSafeString ｜ string ｜ undefined
默认值	undefined

mode

说明	The mode determines which platform styles to use. 这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。
属性	mode
类型	"ios" ｜ "md"
默认值	undefined

showBackdrop

说明	If true, a backdrop will be displayed behind the loading indicator.
属性	show-backdrop
类型	boolean
默认值	true

spinner

说明	The name of the spinner to display.
属性	spinner
类型	"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined
默认值	undefined

translucent

说明	If true, the loading indicator will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
属性	translucent
类型	boolean
默认值	false

trigger

说明	An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
属性	trigger
类型	string ｜ undefined
默认值	undefined

事件

Name	说明	冒泡
didDismiss	Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.	true
didPresent	Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.	true
ionLoadingDidDismiss	Emitted after the loading has dismissed.	true
ionLoadingDidPresent	Emitted after the loading has presented.	true
ionLoadingWillDismiss	Emitted before the loading has dismissed.	true
ionLoadingWillPresent	Emitted before the loading has presented.	true
willDismiss	Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.	true
willPresent	Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.	true

方法

dismiss

说明	Dismiss the loading overlay after it has been presented.
签名	dismiss(data?: any, role?: string) => Promise<boolean>
参数	data: Any data to emit in the dismiss events. role: The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel", "destructive", "selected", and "backdrop". This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the remove method.

onDidDismiss

说明	Returns a promise that resolves when the loading did dismiss.
签名	onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

说明	Returns a promise that resolves when the loading will dismiss.
签名	onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

说明	Present the loading overlay after it has been created.
签名	present() => Promise<void>

CSS 阴影部分

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

Name	说明
--backdrop-opacity	Opacity of the backdrop
--background	Background of the loading dialog
--height	Height of the loading dialog
--max-height	Maximum height of the loading dialog
--max-width	Maximum width of the loading dialog
--min-height	Minimum height of the loading dialog
--min-width	Minimum width of the loading dialog
--spinner-color	Color of the loading spinner
--width	Width of the loading dialog

插槽

该组件没有可用的插槽。