scoped
ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションでbackdropが含まれており、showBackdrop: false
で無効にすることができます。
一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者 は、コンポーネント上で dismiss()
メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。
また、ロードオプションの duration
に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。
使用するスピナーは spinner
プロパティを使用してカスタマイズすることができます。オプションの完全なリストは spinner property documentation を参照してください。
Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。
カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。
ion-loading
is presented at the root of your application, so we recommend placing any ion-loading
styles in a global stylesheet.
Ionicは自動的にLoadingのrole
をdialog
に設定します。
Loadingにmessage
プロパティが定義されている場合、aria-labelledby
属性は自動的にmessage要素のIDに設定されます。そうでない場合、aria-labelledby
は設定されず、開発者は htmlAttributes
プロパティを使用して aria-label
を提供する必要があります。
すべてのARIA属性は、LoadingのhtmlAttributes
プロパティにカスタム値を定義することによって、手動で上書きすることができます。
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;
}
Description | If true , the loading indicator will animate. |
Attribute | animated |
Type | boolean |
Default | true |
Description | If true , the loading indicator will be dismissed when the backdrop is clicked. |
Attribute | backdrop-dismiss |
Type | boolean |
Default | false |
Description | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. |
Attribute | css-class |
Type | string | string[] | undefined |
Default | undefined |
Description | Number of milliseconds to wait before dismissing the loading indicator. |
Attribute | duration |
Type | number |
Default | 0 |
Description | Animation to use when the loading indicator is presented. |
Attribute | undefined |
Type | ((baseEl: any, opts?: any) => Animation) | undefined |
Default | undefined |
Description | Additional attributes to pass to the loader. |
Attribute | undefined |
Type | undefined | { [key: string]: any; } |
Default | undefined |
Description | 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. |
Attribute | is-open |
Type | boolean |
Default | false |
Description | If true , the keyboard will be automatically dismissed when the overlay is presented. |
Attribute | keyboard-close |
Type | boolean |
Default | true |
Description | Animation to use when the loading indicator is dismissed. |
Attribute | undefined |
Type | ((baseEl: any, opts?: any) => Animation) | undefined |
Default | undefined |
Description | 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. |
Attribute | message |
Type | IonicSafeString | string | undefined |
Default | undefined |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
Description | If true , a backdrop will be displayed behind the loading indicator. |
Attribute | show-backdrop |
Type | boolean |
Default | true |
Description | The name of the spinner to display. |
Attribute | spinner |
Type | "bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined |
Default | undefined |
Description | If true , the loading indicator will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter . |
Attribute | translucent |
Type | boolean |
Default | false |
Description | An ID corresponding to the trigger element that causes the loading indicator to open when clicked. |
Attribute | trigger |
Type | string | undefined |
Default | undefined |
Name | Description | Bubbles |
---|
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 |
Description | Dismiss the loading overlay after it has been presented. |
Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
Description | Returns a promise that resolves when the loading did dismiss. |
Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
Description | Returns a promise that resolves when the loading will dismiss. |
Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
Description | Present the loading overlay after it has been created. |
Signature | present() => Promise<void> |
No CSS shadow parts available for this component.
Name | Description |
---|
--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 |
Name | Description |
---|
--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 |
No slots available for this component.