Skeleton

Espaces réservés de chargement animés pour le contenu.

Import

import { Skeleton } from 'asterui'

Exemples

Basique

Formes de squelette simples avec différentes dimensions.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-4 w-28" />
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-full" />
      </Space>
    )
}

export default App

Cercle

Squelette circulaire pour les avatars.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12" />
        <Skeleton circle className="h-16 w-16" />
        <Skeleton circle className="h-20 w-20" />
      </div>
    )
}

export default App

Variante texte

Squelette qui anime la couleur du texte au lieu de l'arrière-plan.

</>

Loading heading...

Loading paragraph text that will be replaced with actual content...

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space size="xs">
        <Skeleton variant="text" className="text-2xl">
          Loading heading...
        </Skeleton>
        <Skeleton variant="text">
          Loading paragraph text that will be replaced with actual content...
        </Skeleton>
      </Space>
    )
}

export default App

Propriétés de largeur et hauteur

Utilisez les propriétés width et height pour un dimensionnement précis.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton width={100} height={100} />
        <Skeleton width="200px" height="100px" />
        <Skeleton width="50%" height={100} />
      </div>
    )
}

export default App

Avatar avec texte

Modèle courant pour les profils utilisateur.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Skeleton circle className="h-12 w-12 shrink-0" />
        <Space size="xs" className="flex-1">
          <Skeleton className="h-4 w-20" />
          <Skeleton className="h-4 w-full" />
        </Space>
      </div>
    )
}

export default App

Squelette de carte

Espace réservé de chargement pour le contenu de carte.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="card bg-base-100 border border-base-300">
        <div className="card-body">
          <Skeleton className="h-48 w-full mb-4" />
          <Skeleton className="h-6 w-3/4 mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-full mb-2" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      </div>
    )
}

export default App

Squelette de liste

Espace réservé de chargement pour les éléments de liste.

</>

import { Skeleton, Space } from 'asterui'

function App() {
  return (
      <Space>
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex gap-4">
            <Skeleton circle className="h-12 w-12 shrink-0" />
            <Space size="xs" className="flex-1">
              <Skeleton className="h-4 w-1/4" />
              <Skeleton className="h-4 w-full" />
            </Space>
          </div>
        ))}
      </Space>
    )
}

export default App

Disposition complexe

Squelette pour des dispositions de contenu plus complexes.

</>

import { Skeleton } from 'asterui'

function App() {
  return (
      <div className="space-y-6">
        <div className="flex gap-4">
          <Skeleton circle className="h-16 w-16 shrink-0" />
          <div className="flex-1 space-y-2">
            <Skeleton className="h-6 w-1/3" />
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-5/6" />
          </div>
        </div>
        <div className="grid grid-cols-3 gap-4">
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
          <Skeleton className="h-32" />
        </div>
      </div>
    )
}

export default App

API

Skeleton

Propriété	Description	Type	Défaut
width	Largeur en pixels ou chaîne CSS	string | number	-
height	Hauteur en pixels ou chaîne CSS	string | number	-
circle	Rendre le squelette circulaire	boolean	false
variant	Variante de squelette	'default' | 'text'	'default'
className	Classes CSS supplémentaires	string	-
children	Contenu (pour la variante texte)	React.ReactNode	-

Accessibilité

• Le squelette est masqué des lecteurs d’écran par défaut
• Utilisez avec des états de chargement pour informer les utilisateurs que le contenu se charge
• Faites correspondre les formes de squelette à la disposition du contenu réel
• Combinez avec les régions ARIA live pour les annonces de chargement