BjSkeleton

Placeholder React : variantes text, heading, circle, rect ; tailles sm, md, lg ; aria-hidden sur le div racine.

Utilisation

import { BjSkeleton } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--bj-spacing-3v)', maxWidth: '20rem' }}>
      <BjSkeleton variant="heading" />
      <BjSkeleton variant="text" />
      <BjSkeleton variant="text" size="sm" />
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--bj-spacing-3v)' }}>
        <BjSkeleton variant="circle" size="lg" />
        <BjSkeleton variant="rect" style={{ flex: 1, minHeight: '3rem' }} />
      </div>
    </div>
  )
}

Aperçu

Variantes

<BjSkeleton variant="text" />
<BjSkeleton variant="heading" />
<BjSkeleton variant="circle" />
<BjSkeleton variant="rect" style={{ minHeight: '4rem' }} />

Tailles

<BjSkeleton variant="text" size="sm" />
<BjSkeleton variant="text" size="md" />
<BjSkeleton variant="text" size="lg" />

Variantes × tailles

<BjSkeleton variant="heading" size="sm" />
<BjSkeleton variant="heading" size="lg" />
<BjSkeleton variant="circle" size="sm" />
<BjSkeleton variant="rect" size="lg" style={{ width: '100%', minHeight: '5rem' }} />

Mise en page

Enchaînez plusieurs BjSkeleton pour simuler une carte.

<div className="bj-card" style={{ padding: 'var(--bj-spacing-4v)', maxWidth: '22rem' }}>
  <BjSkeleton variant="rect" style={{ minHeight: '6rem', marginBottom: 'var(--bj-spacing-3v)' }} />
  <BjSkeleton variant="heading" />
  <BjSkeleton variant="text" />
  <BjSkeleton variant="text" size="sm" />
</div>

Props

Prop	Description
`variant`	text (défaut), heading, circle ou rect.
`size`	sm, md (défaut) ou lg.
`(div props)`	style, className, etc. fusionnés sur le div.