メインコンテンツまでスキップ
Version: v6

ion-loading

scoped

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

基本的な使い方

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

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

Controller

インライン

Ionic ReactとIonic Vueのユーザーは、ion-loadingコンポーネントをテンプレートで直接使用するオプションもあります。

import React, { useState } from 'react';
import { IonLoading, IonButton, IonContent } from '@ionic/react';

export const LoadingExample: React.FC = () => {
const [showLoading, setShowLoading] = useState(false);

return (
<IonContent>
<IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>
<IonLoading
cssClass='my-custom-class'
isOpen={showLoading}
onDidDismiss={() => setShowLoading(false)}
message={'Please wait...'}
duration={5000}
/>
</IonContent>
);
};

カスタマイズ

スピナー

使用するスピナーは 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.

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

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

イベント

NameDescription
ionLoadingDidDismissEmitted after the loading has dismissed.
ionLoadingDidPresentEmitted after the loading has presented.
ionLoadingWillDismissEmitted before the loading has dismissed.
ionLoadingWillPresentEmitted before the loading has presented.

メソッド

dismiss

DescriptionDismiss the loading overlay after it has been presented.
Signaturedismiss(data?: any, role?: string | undefined) => 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.