Skeleton

Die Skeleton-Komponente wird als Platzhalter verwendet, während Inhalte geladen werden. Sie bietet eine einfache visuelle Darstellung der zu ladenden Komponente, typischerweise als grauer oder hell gefärbter Block.

Verwendung

Um Skeleton zu verwenden, importieren Sie es aus Ihren Komponenten und übergeben Sie die Props width, height und className, um das Erscheinungsbild anzupassen.

Einfaches Skeleton

Ein einfaches Skeleton mit Standardbreite und -höhe.

import React from "react";
import { Skeleton } from "@firecms/ui";

export default function SkeletonBasicDemo() {
    return <Skeleton />;
}

Skeleton mit benutzerdefinierter Größe

Eine Skeleton-Komponente, die eine benutzerdefinierte Breite und Höhe zeigt.

import React from "react";
import { Skeleton } from "@firecms/ui";

export default function SkeletonCustomSizeDemo() {
    return (
        <>
            <Skeleton width={200} height={20} />
            <Skeleton width={100} height={10} />
        </>
    );
}

Skeleton mit benutzerdefinierten Klassen

Demonstriert die Verwendung der Eigenschaft className, um benutzerdefinierte Stile anzuwenden.

import React from "react";
import { Skeleton } from "@firecms/ui";

export default function SkeletonCustomClassDemo() {
    return <Skeleton className="my-4 bg-red-400" />;
}