Skip to main content
Version: v8

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

isOpen​

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

keyboardClose​

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

leaveAnimation​

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

message​

Descriptionローディングインジケータに表示するテキストコンテンツを任意で指定します。 このプロパティは、文字列としてカスタムHTMLを受け入れます。コンテンツはデフォルトでプレーンテキストとしてパースされます。カスタムHTMLを使用するには、Ionicの設定で innerHTMLTemplatesEnabled を true に設定する必要があります。
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

trigger​

Descriptionクリックするとローディングインジケータが開くトリガー要素に対応するIDです。
Attributetrigger
Typestring ｜ undefined
Defaultundefined

イベント​

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

メソッド​

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