Zum Hauptinhalt springen

Loader

Loader in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Loader oder Inline-Loader und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Basis-Loader​

Ein Basis-Loader zeigt eine Animation der Marke Guidewire anstelle der untergeordneten Elemente an, bis sie zur Anzeige bereit sind.

<Loader>
  <span>Incoming content</span>
</Loader>

Es gibt zwei Möglichkeiten, die untergeordneten Elemente dieser Komponente anzuzeigen:

  1. Ändern der Eigenschaft loaded in true.
  2. Wenn die Eigenschaft loaded vom Typ Promise ist, wird sie automatisch aktualisiert, wenn der asynchrone Vorgang der Zusage abgeschlossen wird.

Benutzerdefinierte Loader-Animation​

Sie können die Eigenschaft renderLoader verwenden, um einen benutzerdefinierten Loader anstelle des Standard-Loaders zu definieren. Diese Eigenschaft ist eine Funktion, die jedes beliebige React-Element zurückgibt. Dabei kann es sich um einen einfachen Text wie den im Beispiel gezeigten Text oder um eine komplexere Animation wie die Anzeige des Standard-Loaders handeln.

function CustomLoader() {
  return <span>Custom loading message.</span>;
}

<Loader renderLoader={CustomLoader}>
  <span>Incoming content</span>
</Loader>;

Einfacher Inline-Loader​

Ein Inline-Loader ist eine Komponente, die angibt, ob Inhalte aktuell geladen werden. Ein einfacher Inline-Loader zeigt ein Standardsymbol an, wenn Inhalte geladen werden. Wenn keine Inhalte geladen werden, wird nichts angezeigt.

<InlineLoader
  loading={loadingStatus} // true, false, or Promise
/>

Es gibt zwei Möglichkeiten, die Komponente zwischen der geladenen und der nicht geladenen Version zu ändern:

  1. Wenn es sich bei der Eigenschaft loading um den Boolean-Typ handelt, wird das Standard-Ladesymbol angezeigt, wenn der Wert dieser Eigenschaft true ist.
  2. Wenn die Eigenschaft loading vom Typ Promise ist, wird anfänglich das Standard-Ladesymbol angezeigt, das jedoch automatisch aktualisiert wird, wenn der asynchrone Vorgang der Zusage abgeschlossen wird.

Inline-Loader mit benutzerdefinierten Meldungen​

Mit den Eigenschaften successMessage und loadingMessage können Sie benutzerdefinierten Text in der Inline-Loader-Komponente hinzufügen. Wenn eine Erfolgsmeldung angezeigt wird, wird der entsprechende Text auch neben einem Häkchensymbol angezeigt.

<InlineLoader
  loading={loadingStatus} // true, false, or Promise
  loadingMessage="Loading..."
  successMessage="Success!"
/>

Inline-Loader mit benutzerdefiniertem Symbol​

Mit den Eigenschaften loadingIcon und successIcon können Sie benutzerdefinierte Symbole in der Inline-Loader-Komponente hinzufügen. Beachten Sie, dass, wie bereits erwähnt, auch eine Erfolgsmeldung für Inhalte angezeigt werden muss, wenn der entsprechende Ladevorgang abgeschlossen ist.

<InlineLoader
  loading={loadingStatus} // true, false, or Promise
  loadingMessage="Loading..."
  successMessage="Success!"
  loadingIcon={SearchIcon}
  successIcon={StarIcon}
/>