Esqueleto (Skeleton)

El componente Skeleton (Esqueleto) se utiliza como marcador de posición mientras se carga el contenido. Proporciona una representación visual simple del componente que se está cargando, generalmente como un bloque gris o de color claro.

Uso

Para usar Skeleton, impórtalo desde tus componentes y pasa las props width (ancho), height (alto) y className (clase CSS) para personalizar su apariencia.

Esqueleto básico

Un esqueleto simple con ancho y alto predeterminados.

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

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

Esqueleto de tamaño personalizado

Un componente de esqueleto que muestra un ancho y alto personalizados.

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

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

Esqueleto con clases personalizadas

Demuestra el uso de la prop className para aplicar estilos personalizados.

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

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