Version: v8

ion-loading

ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションでbackdropが含まれており、showBackdrop: false で無効にすることができます。

基本的な使い方

一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者は、コンポーネント上で dismiss() メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。

また、ロードオプションの duration に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。

インラインロード (推奨)

Controller

Customization

スピナー

使用するスピナーは spinner プロパティを使用してカスタマイズすることができます。オプションの完全なリストは spinner property documentation を参照してください。

テーマ

Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSSでscopedセレクタをオーバーライドするには、higher specificity セレクタが必要です。

カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。

note

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プロパティにカスタム値を定義することによって、手動で上書きすることができます。

Interfaces

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

Description	`true`の場合、ロードインジケータをアニメーションで表示します。
Attribute	`animated`
Type	`boolean`
Default	`true`

backdropDismiss

Description	`true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。
Attribute	`backdrop-dismiss`
Type	`boolean`
Default	`false`

cssClass

Description	カスタムCSSに適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。
Attribute	`css-class`
Type	`string ｜ string[] ｜ undefined`
Default	`undefined`

duration

Description	ローディングインジケータを解除するまでの待ち時間（ミリ秒）。
Attribute	`duration`
Type	`number`
Default	`0`

enterAnimation

Description	ローディングインジケータが表示されたときに使用するアニメーションです。
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

htmlAttributes

Description	ローダーに渡す追加属性。
Attribute	`undefined`
Type	`undefined ｜ { [key: string]: any; }`
Default	`undefined`

isOpen

Description	`true`の場合、ローディングインジケータは開きます。`false`の場合、ローディングインジケータは閉じます。より細かく表示を制御したい場合に使用します。そうでない場合は、loadingController または `trigger` プロパティを使用してください。注意: ローディングインジケータが終了しても、`isOpen`は自動的に `false`に戻されません。あなたのコードでそれを行う必要があります。
Attribute	`is-open`
Type	`boolean`
Default	`false`

keyboardClose

Description	`true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attribute	`keyboard-close`
Type	`boolean`
Default	`true`

leaveAnimation

Description	ローディングインジケータが解除されたときに使用するアニメーションです。
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

message

Description	ローディングインジケータに表示するテキストコンテンツを任意で指定します。このプロパティは、文字列としてカスタムHTMLを受け入れます。コンテンツはデフォルトでプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。
Attribute	`message`
Type	`IonicSafeString ｜ string ｜ undefined`
Default	`undefined`

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

showBackdrop

Description	`true`の場合、ロードインジケータの後ろにバックドロップが表示されます。
Attribute	`show-backdrop`
Type	`boolean`
Default	`true`

spinner

Description	表示するスピナーの名前。
Attribute	`spinner`
Type	`"bubbles" ｜ "circles" ｜ "circular" ｜ "crescent" ｜ "dots" ｜ "lines" ｜ "lines-sharp" ｜ "lines-sharp-small" ｜ "lines-small" ｜ null ｜ undefined`
Default	`undefined`

translucent

Description	`true`の場合、ロードインジケータは半透明になります。modeが `"ios"` で、デバイスが `backdrop-filter` をサポートしている場合にのみ適用されます。
Attribute	`translucent`
Type	`boolean`
Default	`false`

trigger

Description	クリックするとローディングインジケータが開くトリガー要素に対応するIDです。
Attribute	`trigger`
Type	`string ｜ undefined`
Default	`undefined`

イベント

Name	Description	Bubbles
`didDismiss`	ローディングインジケータが解除された後に発行されます。ionLoadingDidDismissの略記。	`true`
`didPresent`	ローディングインジケータが提示された後に放出される。ionLoadingWillDismissの略記。	`true`
`ionLoadingDidDismiss`	ローディングが解除された後に発行されます。	`true`
`ionLoadingDidPresent`	ローディングが提示された後に発行されます。	`true`
`ionLoadingWillDismiss`	ローディングが解除される前に発行されます。	`true`
`ionLoadingWillPresent`	ローディングが提示される前に発行されます。	`true`
`willDismiss`	ローディングインジケータが解散する前に発行されます。ionLoadingWillDismissの略記です。	`true`
`willPresent`	ローディングインジケータが提示される前に発行されます。ionLoadingWillPresentの略記。	`true`

メソッド

dismiss

Description	ローディングオーバーレイが提示された後、それを解除します。
Signature	`dismiss(data?: any, role?: string) => Promise<boolean>`

onDidDismiss

Description	ローディングが解除されたタイミングを解決するPromiseを返します。
Signature	`onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

onWillDismiss

Description	ローディングが解除されるタイミングを解決するPromiseを返します。
Signature	`onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>`

present

Description	作成後のローディングオーバーレイを提示します。
Signature	`present() => Promise<void>`

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

Name	Description
`--backdrop-opacity`	背景の不透明度
`--background`	ローディングダイアログの背景
`--height`	ローディングダイアログの高さ
`--max-height`	ローディングダイアログの最大の高さ
`--max-width`	ローディングダイアログの最大幅
`--min-height`	ローディングダイアログの最小高さ
`--min-width`	ローディングダイアログの最小幅
`--spinner-color`	ローディングスピナーの色
`--width`	ローディングダイアログの幅

Slots

No slots available for this component.

基本的な使い方​

インラインロード (推奨)​

Controller​

Customization​

スピナー​

テーマ​

アクセシビリティ​

Interfaces​

LoadingOptions​

プロパティ​

animated​

backdropDismiss​

cssClass​

duration​

enterAnimation​

htmlAttributes​

isOpen​

keyboardClose​

leaveAnimation​

message​

mode​

showBackdrop​

spinner​

translucent​

trigger​

イベント​

メソッド​

dismiss​

onDidDismiss​

onWillDismiss​

present​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents