Skip to main content
Version: v7 (beta)

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

Descriptiontrueの場合、ロードインジケータをアニメーションで表示します。
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

Descriptiontrueの場合、バックドロップがクリックされたときにローディングインジケータが解除される。
Attributebackdrop-dismiss
Typeboolean
Defaultfalse

cssClass

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

duration

Descriptionローディングインジケータを解除するまでの待ち時間（ミリ秒）。
Attributeduration
Typenumber
Default0

enterAnimation

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

htmlAttributes

Descriptionローダーに渡す追加属性。
Attributeundefined
Typeundefined ｜ { [key: string]: any; }
Defaultundefined

keyboardClose

Descriptiontrueの場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

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

message

Descriptionロードインジケータに表示するテキストコンテンツは任意です。
Attributemessage
TypeIonicSafeString ｜ string ｜ undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" ｜ "md"
Defaultundefined

showBackdrop

Descriptiontrueの場合、ロードインジケータの後ろにバックドロップが表示されます。
Attributeshow-backdrop
Typeboolean
Defaulttrue

spinner

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

translucent

Descriptiontrueの場合、ロードインジケータは半透明になります。modeが "ios" で、デバイスが backdrop-filter をサポートしている場合にのみ適用されます。
Attributetranslucent
Typeboolean
Defaultfalse

イベント

NameDescription
ionLoadingDidDismissローディングが解除された後に発行されます。
ionLoadingDidPresentローディングが提示された後に発行されます。
ionLoadingWillDismissローディングが解除される前に発行されます。
ionLoadingWillPresentローディングが提示される前に発行されます。

メソッド

dismiss

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

onDidDismiss

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

onWillDismiss

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

present

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

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

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

Slots

No slots available for this component.

Contents

Edit this page