ion-loading

scoped

ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションで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	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

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	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

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	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

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	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

trigger

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.

メソッド

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.