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 | trueの場合、ロードインジケータをアニメーションで表示します。 |
| Attribute | animated |
| Type | boolean |
| Default | true |
| Description | trueの場合、バックドロップがクリックされたときにローディングインジケータが解除される。 |
| 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 | ローディングインジケータを解除するまでの待ち時間（ミリ秒）。 |
| Attribute | duration |
| Type | number |
| Default | 0 |
| Description | ローディングインジケータが表示されたときに使用するアニメーションです。 |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| Default | undefined |
| Description | ローダーに渡す追加属性。 |
| 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 | trueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 |
| Attribute | keyboard-close |
| Type | boolean |
| Default | true |
| Description | ローディングインジケータが解除されたときに使用するアニメーションです。 |
| 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 | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | trueの場合、ロードインジケータの後ろにバックドロップが表示されます。 |
| Attribute | show-backdrop |
| Type | boolean |
| Default | true |
| Description | 表示するスピナーの名前。 |
| 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 |
|---|
didDismiss | Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss. |
didPresent | Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss. |
ionLoadingDidDismiss | ローディングが解除された後に発行されます。 |
ionLoadingDidPresent | ローディングが提示された後に発行されます。 |
ionLoadingWillDismiss | ローディングが解除される前に発行されます。 |
ionLoadingWillPresent | ローディングが提示される前に発行されます。 |
willDismiss | Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss. |
willPresent | Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent. |
| Description | ローディングオーバーレイが提示された後、それを解除します。 |
| Signature | dismiss(data?: any, role?: string) => Promise<boolean> |
| Description | ローディングが解除されたタイミングを解決するPromiseを返します。 |
| Signature | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | ローディングが解除されるタイミングを解決するPromiseを返します。 |
| Signature | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| Description | 作成後のローディングオーバーレイを提示します。 |
| Signature | present() => Promise<void> |
No CSS shadow parts available for this component.
| Name | Description |
|---|
--backdrop-opacity | 背景の不透明度 |
--background | ローディングダイアログの背景 |
--height | ローディングダイアログの高さ |
--max-height | ローディングダイアログの最大の高さ |
--max-width | ローディングダイアログの最大幅 |
--min-height | ローディングダイアログの最小高さ |
--min-width | ローディングダイアログの最小幅 |
--spinner-color | ローディングスピナーの色 |
--width | ローディングダイアログの幅 |
No slots available for this component.