Skeleton

Le composant Skeleton est utilisé comme espace réservé pendant que le contenu se charge. Il fournit une représentation visuelle simple du composant en cours de chargement, généralement sous la forme d’un bloc gris ou de couleur claire.

Utilisation

Pour utiliser le Skeleton, importez-le depuis vos composants et passez les props width, height et className pour personnaliser son apparence.

Skeleton de base

Un skeleton simple avec la largeur et la hauteur par défaut.

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

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

Skeleton de taille personnalisée

Un composant skeleton qui illustre la largeur et la hauteur personnalisées.

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 avec classes personnalisées

Démontre l’utilisation de la prop className pour appliquer des styles personnalisés.

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

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