Loader Ladeanzeige - Docs - Artefact

Loader Ladeanzeige

Feedback

Rein darstellend

Einführung

Eine Hilfskomponente, die den visuellen Zustand eines Spinner und zugehörigen Texts verwaltet.

Verwendung

Loading data...

import { Loader, Spinner } from "../components/ui";

export default function MyPage() {
  return <Loader text="Loading data..." />;
}

Benutzerdefinierter Spinner und Platzierung

import { Loader, Spinner } from "../components/ui";

export default function MyPage() {
  return (
    <Loader
      spinner={<Spinner size="lg" colorPalette="blue" />}
      spinnerPlacement="end"
    >
      Please wait
    </Loader>
  );
}

CMS-Seitenbauer

Diese Komponente ist als loader-Block im Seitenbauer (content/pages/*.json) verfügbar — das CMS-Feld text bildet direkt auf die text-Eigenschaft von Loader ab:

{
  "type": "loader",
  "text": "Checking availability...",
  "spinnerPlacement": "start"
}

Eigenschaften

Eigenschaft	Typ	Beschreibung
`children`	`any`	Textinhalt, der neben dem Spinner gerendert wird.
`spinner`	`Child`	Benutzerdefiniertes Spinner-Element. Standardmäßig `<Spinner size="inherit" />`.
`text`	`Child`	Alternative Eigenschaft für Textinhalt.