Bileşenler

ProgressBar

Bir görevin ne kadar ilerlediğini gösteren ya da kalan süre bilinmezken kayan çubuk.

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

Etiket ve yüzde çubuğun üstündedir. Yüzde Provider diline göre biçimlenir: Türkçede “%40”.

Dosya yükleniyor

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

export default function Default() {
  return <ProgressBar label="Dosya yükleniyor" value={40} />;
}

Belirsiz

value verilmezse çubuk kayar. Hareketi azaltma açıkken kayma durur ve soluk, dolu bir çubuk kalır.

Hazırlanıyor

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

export default function Indeterminate() {
  return <ProgressBar label="Hazırlanıyor" />;
}

Açıklamalı

valueText yüzde yerine okunan değeri verir; description kalan süre gibi bir satır ekler.

Dosyalar aktarılıyor

Yaklaşık 2 dakika kaldı

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

export default function WithDescription() {
  return <ProgressBar label="Dosyalar aktarılıyor" value={3} max={10} valueText="10 dosyadan 3'ü" description="Yaklaşık 2 dakika kaldı" />;
}

Boyutlar ve tonlar

size="sm" 4 px, md 8 px. Sonuç belli olunca success, warning ya da danger kullanın.

Dosya yükleniyor

Yükleme tamamlandı

Yükleme durdu

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

export default function SizesAndTones() {
  return (
    <div className="flex flex-col gap-lg">
      <ProgressBar label="Dosya yükleniyor" value={40} size="sm" />
      <ProgressBar label="Yükleme tamamlandı" value={100} tone="success" />
      <ProgressBar label="Yükleme durdu" value={65} tone="danger" />
    </div>
  );
}

Canlı

Dolgu genişliği değil ölçeği değiştirerek büyür, böylece yerleşimi yeniden hesaplatmaz.

Dosya yükleniyor

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

export default function Live() {
  const [value, setValue] = useState(0);
  const [running, setRunning] = useState(false);
  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setValue((current) => Math.min(current + 10, 100)), 500);
    return () => clearInterval(id);
  }, [running]);
  return (
    <div className="flex flex-col gap-md">
      <ProgressBar label="Dosya yükleniyor" value={value} tone={value === 100 ? 'success' : 'brand'} />
      <div className="flex gap-sm">
        <Button size="sm" onClick={() => setRunning(true)}>
          Başlat
        </Button>
        <Button
          size="sm"
          variant="secondary"
          onClick={() => {
            setRunning(false);
            setValue(0);
          }}
        >
          Sıfırla
        </Button>
      </div>
    </div>
  );
}

Açık ve koyu mod

Ray color-surface-sunken, dolgu color-action-primary-default kullanır.

Dosya yükleniyor

Yükleme tamamlandı

Yükleme durdu

Dosya yükleniyor

Yükleme tamamlandı

Yükleme durdu

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

export default function SizesAndTones() {
  return (
    <div className="flex flex-col gap-lg">
      <ProgressBar label="Dosya yükleniyor" value={40} size="sm" />
      <ProgressBar label="Yükleme tamamlandı" value={100} tone="success" />
      <ProgressBar label="Yükleme durdu" value={65} tone="danger" />
    </div>
  );
}