Bileşenler

Skeleton

Henüz yüklenen içeriğin biçiminde bir yer tutucu.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Skeleton role="status" ve aria-busy taşır, görünmeyen “İçerik yükleniyor” metnini okutur. Vurgu üç kez geçer ve durur.

import { Skeleton } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="w-80">

        <Skeleton lines={3} />

    </div>
  );
}

Biçimler

shape: text satırlar, block 16:9 blok, circle 32 px daire.

import { Skeleton } from '@bigbang/ui';

export default function Shapes() {
  return (
    <div className="flex w-80 flex-col gap-lg">
      <Skeleton lines={2} />
      <Skeleton shape="block" />
      <Skeleton shape="circle" />
    </div>
  );
}

Kart yer tutucusu

Birden çok parça bir öğeyi temsil ediyorsa durum rolünü kapsayıcıya verin ve parçaları decorative yapın.

import { Skeleton } from '@bigbang/ui';

export default function Card() {
  return (
    <div role="status" aria-busy="true" className="flex w-80 items-start gap-md">
      <Skeleton shape="circle" decorative />
      <div className="flex flex-1 flex-col gap-sm">
        <Skeleton width="60%" decorative />
        <Skeleton lines={2} decorative />
      </div>
      <span className="sr-only">Kart yükleniyor</span>
    </div>
  );
}

Yüklenince gösterme

loading={false} olunca yerini children alır ve motion.reveal ile belirir.

import { Button, Skeleton } from '@bigbang/ui';
import { useState } from 'react';

export default function Reveal() {
  const [loading, setLoading] = useState(true);
  return (
    <div className="flex w-80 flex-col gap-md">
      <Skeleton lines={2} loading={loading}>
        <p className="type-body-md text-fg-default">Kart açıklaması burada yer alır.</p>
      </Skeleton>
      <div>
        <Button variant="secondary" size="sm" onClick={() => setLoading((value) => !value)}>
          Yüklemeyi değiştir
        </Button>
      </div>
    </div>
  );
}

Açık ve koyu mod

Zemin color-surface-sunken, vurgu color-surface-raised rengindedir.

import { Skeleton } from '@bigbang/ui';

export default function Shapes() {
  return (
    <div className="flex w-80 flex-col gap-lg">
      <Skeleton lines={2} />
      <Skeleton shape="block" />
      <Skeleton shape="circle" />
    </div>
  );
}