メインコンテンツまでスキップ
バージョン: v8 (beta)

ion-loading

scoped

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

基本的な使い方

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

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

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

Controller

Customization

スピナー

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

テーマ

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

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

注記

ion-loading is presented at the root of your application, so we recommend placing any ion-loading styles in a global stylesheet.

アクセシビリティ

Ionicは自動的にLoadingのroledialogに設定します。

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

DescriptionIf true, the loading indicator will animate.
Attributeanimated
Typeboolean
Defaulttrue

backdropDismiss

DescriptionIf true, the loading indicator will be dismissed when the backdrop is clicked.
Attributebackdrop-dismiss
Typeboolean
Defaultfalse

cssClass

DescriptionAdditional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attributecss-class
Typestring | string[] | undefined
Defaultundefined

duration

DescriptionNumber of milliseconds to wait before dismissing the loading indicator.
Attributeduration
Typenumber
Default0

enterAnimation

DescriptionAnimation to use when the loading indicator is presented.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

htmlAttributes

DescriptionAdditional attributes to pass to the loader.
Attributeundefined
Typeundefined | { [key: string]: any; }
Defaultundefined

isOpen

DescriptionIf 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.
Attributeis-open
Typeboolean
Defaultfalse

keyboardClose

DescriptionIf true, the keyboard will be automatically dismissed when the overlay is presented.
Attributekeyboard-close
Typeboolean
Defaulttrue

leaveAnimation

DescriptionAnimation to use when the loading indicator is dismissed.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) | undefined
Defaultundefined

message

DescriptionOptional 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.
Attributemessage
TypeIonicSafeString | string | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

showBackdrop

DescriptionIf true, a backdrop will be displayed behind the loading indicator.
Attributeshow-backdrop
Typeboolean
Defaulttrue

spinner

DescriptionThe name of the spinner to display.
Attributespinner
Type"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-sharp" | "lines-sharp-small" | "lines-small" | null | undefined
Defaultundefined

translucent

DescriptionIf true, the loading indicator will be translucent. Only applies when the mode is "ios" and the device supports backdrop-filter.
Attributetranslucent
Typeboolean
Defaultfalse

trigger

DescriptionAn ID corresponding to the trigger element that causes the loading indicator to open when clicked.
Attributetrigger
Typestring | undefined
Defaultundefined

イベント

NameDescriptionBubbles
didDismissEmitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.true
didPresentEmitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.true
ionLoadingDidDismissEmitted after the loading has dismissed.true
ionLoadingDidPresentEmitted after the loading has presented.true
ionLoadingWillDismissEmitted before the loading has dismissed.true
ionLoadingWillPresentEmitted before the loading has presented.true
willDismissEmitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.true
willPresentEmitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.true

メソッド

dismiss

DescriptionDismiss the loading overlay after it has been presented.
Signaturedismiss(data?: any, role?: string) => Promise<boolean>

onDidDismiss

DescriptionReturns a promise that resolves when the loading did dismiss.
SignatureonDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>

onWillDismiss

DescriptionReturns a promise that resolves when the loading will dismiss.
SignatureonWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>

present

DescriptionPresent the loading overlay after it has been created.
Signaturepresent() => Promise<void>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backdrop-opacityOpacity of the backdrop
--backgroundBackground of the loading dialog
--heightHeight of the loading dialog
--max-heightMaximum height of the loading dialog
--max-widthMaximum width of the loading dialog
--min-heightMinimum height of the loading dialog
--min-widthMinimum width of the loading dialog
--spinner-colorColor of the loading spinner
--widthWidth of the loading dialog

Slots

No slots available for this component.