スコープ付き
ユーザーインタラクションをブロックしながらアクティビティを示すために使用できるオーバーレイです。ローディングインジケーターはアプリのコンテンツの上に表示され、アプリがそれを閉じるとユーザーインタラクションが再開されます。オプションでバックドロップを含んでおり、作成時に`showBackdrop: false`を設定することで無効にできます。
表示されると、ローディングインジケーターはデフォルトで無期限に表示されます。開発者は、コンポーネントの`dismiss()`メソッドを呼び出すことで、作成後にローディングインジケーターを手動で閉じることができます。`onDidDismiss`関数は、ローディングインジケーターが閉じられた後にアクションを実行するために呼び出すことができます。
あるいは、ローディングオプションの`duration`に表示するミリ秒数を渡すことで、ローディングインジケーターを特定の時間後に自動的に閉じるように設定できます。
使用されるスピナーは、`spinner`プロパティを使用してカスタマイズできます。オプションの全リストについては、スピナーのプロパティに関するドキュメントを参照してください。
Loadingはスコープ付きカプセル化を使用しているため、実行時に各スタイルに追加のクラスを追加することで、CSSを自動的にスコープします。CSSでスコープ付きセレクターを上書きするには、より高い特異性のセレクターが必要です。
カスタムクラスを渡して、それを使用してホストと内部要素にカスタムスタイルを追加することをお勧めします。
ion-loadingはアプリケーションのルートに表示されるため、ion-loadingのスタイルはグローバルスタイルシートに配置することをお勧めします。
Ionicは、Loadingの`role`をdialogに自動的に設定します。
Loadingに`message`プロパティが定義されている場合、`aria-labelledby`属性はメッセージ要素の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;
}
| 説明 | `true`の場合、ローディングインジケーターはアニメーションします。 |
| 属性 | animated |
| 型 | boolean |
| デフォルト | true |
| 説明 | `true`の場合、バックドロップをクリックするとローディングインジケーターが閉じられます。 |
| 属性 | backdrop-dismiss |
| 型 | boolean |
| デフォルト | false |
| 説明 | カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 |
| 属性 | css-class |
| 型 | string ｜ string[] ｜ undefined |
| デフォルト | undefined |
| 説明 | ローディングインジケーターを閉じるまでに待機するミリ秒数。 |
| 属性 | duration |
| 型 | number |
| デフォルト | 0 |
| 説明 | ローディングインジケーターが表示されるときに使用するアニメーション。 |
| 属性 | undefined |
| 型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| デフォルト | undefined |
| 説明 | ローダーに渡す追加の属性。 |
| 属性 | undefined |
| 型 | undefined ｜ { [key: string]: any; } |
| デフォルト | undefined |
| 説明 | `true`の場合、ローディングインジケーターが開きます。`false`の場合、ローディングインジケーターが閉じます。プレゼンテーションをより細かく制御する必要がある場合に使用します。それ以外の場合は、loadingControllerまたは`trigger`プロパティを使用してください。注：ローディングインジケーターが閉じられても、`isOpen`は自動的に`false`に戻りません。コードでそれを行う必要があります。 |
| 属性 | is-open |
| 型 | boolean |
| デフォルト | false |
| 説明 | `true`の場合、オーバーレイが表示されるとキーボードが自動的に閉じられます。 |
| 属性 | keyboard-close |
| 型 | boolean |
| デフォルト | true |
| 説明 | ローディングインジケーターが閉じられるときに使用するアニメーション。 |
| 属性 | undefined |
| 型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| デフォルト | undefined |
| 説明 | ローディングインジケーターに表示するオプションのテキストコンテンツ。
このプロパティは、文字列としてカスタムHTMLを受け入れます。コンテンツはデフォルトでプレーンテキストとして解析されます。カスタムHTMLを使用する前に、Ionicの設定でinnerHTMLTemplatesEnabledをtrueに設定する必要があります。 |
| 属性 | メッセージ |
| 型 | IonicSafeString ｜ string ｜ undefined |
| デフォルト | undefined |
| 説明 | モードは、使用するプラットフォームスタイルを決定します。 |
| 属性 | モード |
| 型 | "ios" ｜ "md" |
| デフォルト | undefined |
| 説明 | trueの場合、ローディングインジケーターの背後に背景が表示されます。 |
| 属性 | show-backdrop |
| 型 | boolean |
| デフォルト | true |
| 説明 | 表示するスピナーの名前。 |
| 属性 | スピナー |
| 型 | "bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined |
| デフォルト | undefined |
| 説明 | trueの場合、ローディングインジケーターは半透明になります。モードが"ios"で、デバイスがbackdrop-filterをサポートしている場合にのみ適用されます。 |
| 属性 | translucent |
| 型 | boolean |
| デフォルト | false |
| 説明 | クリックされたときにローディングインジケーターが開くトリガー要素に対応するID。 |
| 属性 | トリガー |
| 型 | string ｜ undefined |
| デフォルト | undefined |
| 名前 | 説明 | バブル |
|---|
didDismiss | ローディングインジケーターが閉じられた後に発生します。ionLoadingDidDismissの省略形です。 | true |
didPresent | ローディングインジケーターが表示された後に発生します。ionLoadingWillDismissの省略形です。 | true |
ionLoadingDidDismiss | ローディングが閉じられた後に発生します。 | true |
ionLoadingDidPresent | ローディングが表示された後に発生します。 | true |
ionLoadingWillDismiss | ローディングが閉じられる前に発生します。 | true |
ionLoadingWillPresent | ローディングが表示される前に発生します。 | true |
willDismiss | ローディングインジケーターが閉じられる前に発生します。ionLoadingWillDismissの省略形です。 | true |
willPresent | ローディングインジケーターが表示される前に発生します。ionLoadingWillPresentの省略形です。 | true |
| 説明 | 表示された後にローディングオーバーレイを閉じます。 |
| シグネチャ | dismiss(data?: any, role?: string) => Promise<boolean> |
| 説明 | ローディングが閉じられたときに解決されるPromiseを返します。 |
| シグネチャ | onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| 説明 | ローディングが閉じられるときに解決されるPromiseを返します。 |
| シグネチャ | onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>> |
| 説明 | 作成後にローディングオーバーレイを表示します。 |
| シグネチャ | present() => Promise<void> |
このコンポーネントで使用できるCSSシャドウパーツはありません。
| 名前 | 説明 |
|---|
--backdrop-opacity | 背景の不透明度 |
--background | ローディングダイアログの背景 |
--height | ローディングダイアログの高さ |
--max-height | ローディングダイアログの最大高さ |
--max-width | ローディングダイアログの最大幅 |
--min-height | ローディングダイアログの最小高さ |
--min-width | ローディングダイアログの最小幅 |
--spinner-color | ローディングスピナーの色 |
--width | ローディングダイアログの幅 |
| 名前 | 説明 |
|---|
--backdrop-opacity | 背景の不透明度 |
--background | ローディングダイアログの背景 |
--height | ローディングダイアログの高さ |
--max-height | ローディングダイアログの最大高さ |
--max-width | ローディングダイアログの最大幅 |
--min-height | ローディングダイアログの最小高さ |
--min-width | ローディングダイアログの最小幅 |
--spinner-color | ローディングスピナーの色 |
--width | ローディングダイアログの幅 |
このコンポーネントで使用できるスロットはありません。