Skeleton

Il componente Skeleton è usato come segnaposto mentre il contenuto viene caricato. Fornisce una rappresentazione visiva semplice del componente in caricamento, tipicamente come un blocco grigio o di colore chiaro.

Utilizzo

Per usare lo Skeleton, importalo dai tuoi componenti e passa le prop width, height e className per personalizzarne l’aspetto.

Skeleton di base

Uno skeleton semplice con larghezza e altezza predefinite.

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

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

Skeleton con dimensioni personalizzate

Un componente skeleton che mostra larghezza e altezza personalizzate.

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

Dimostra l’uso della prop className per applicare stili personalizzati.

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

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