Bileşenler

Meter

Bilinen bir aralıktaki tek bir değeri çubukla gösterir: kullanılan depolama, kota, puan.

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

Meter bir etiket, değer ve çubuktan oluşur. value 0 ile 100 arasındaysa değer yüzde olarak gösterilir. description çubuğun altına yardım metni koyar ve ekran okuyucuya bağlanır.

Depolama alanı

Son güncelleme bugün.

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

export default function Default() {
  return <Meter label="Depolama alanı" value={64} description="Son güncelleme bugün." className="w-full max-w-96" />;
}

Boyutlar

Çubuk md boyutunda 8 px, sm boyutunda 4 px yüksekliğindedir. Yoğun satırlarda ve tablolarda sm kullanın.

Depolama alanı (Küçük)

Depolama alanı (Orta)

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

export default function Sizes() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Depolama alanı (Küçük)" value={64} size="sm" />
      <Meter label="Depolama alanı (Orta)" value={64} size="md" />
    </div>
  );
}

Renk ve eşikler

tone="auto" iken low, high ve optimum HTML <meter> bölgelerini izler. Burada kullanım için en iyi değer 0’dır (optimum={0}): düşük bölge iyi, orta bölge uyarı, yüksek bölge tehlikedir. Renk yalnızca görsel destektir; ekran okuyucu değerin yanında “ideal”, “orta” ya da “yüksek” kelimesini de okur. Eşik vermezseniz renk markadır. Sabit renk için brand, neutral, success, warning ya da danger verin.

Kota kullanımı

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

export default function Tones() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Kota kullanımı" value={30} low={50} high={80} optimum={0} />
      <Meter label="Kota kullanımı" value={65} low={50} high={80} optimum={0} />
      <Meter label="Kota kullanımı" value={92} low={50} high={80} optimum={0} />
    </div>
  );
}

Biçim

Varsayılan biçim aralığın yüzdesidir. format ile Intl.NumberFormat seçenekleri verin: birim (gigabyte), ondalık sayı ya da düz sayı. Dil, Provider’ın diline göre seçilir.

Depolama alanı (Yüzde)

Depolama alanı (Birim (GB))

Puan (Düz sayı)

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

export default function Formats() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Depolama alanı (Yüzde)" value={64} />
      <Meter label="Depolama alanı (Birim (GB))" value={32} max={50} format={{ style: 'unit', unit: 'gigabyte' }} />
      <Meter label="Puan (Düz sayı)" value={7.5} max={10} format={{ maximumFractionDigits: 1 }} />
    </div>
  );
}

Açık ve koyu mod

Meter dolguyu durum token’larından, izi yüzey token’ından alır.

Kota kullanımı

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

export default function Tones() {
  return (
    <div className="flex w-full max-w-96 flex-col gap-xl">
      <Meter label="Kota kullanımı" value={30} low={50} high={80} optimum={0} />
      <Meter label="Kota kullanımı" value={65} low={50} high={80} optimum={0} />
      <Meter label="Kota kullanımı" value={92} low={50} high={80} optimum={0} />
    </div>
  );
}