Skeleton

O componente Skeleton é usado como espaço reservado enquanto o conteúdo está carregando. Fornece uma representação visual simples do componente que está sendo carregado, tipicamente como um bloco cinza ou de cor clara.

Uso

Para usar o Skeleton, importe-o dos seus componentes e passe as props width, height e className para personalizar sua aparência.

Skeleton básico

Um skeleton simples com largura e altura padrão.

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

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

Skeleton com tamanho personalizado

Um componente skeleton que mostra largura e altura personalizadas.

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 With Custom Classes

Demonstra o uso da 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" />;
}