Bileşenler

Slider

Bir tutamacı iz boyunca sürükleyerek ya da ok tuşlarıyla bir değer veya aralık seçme.

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

Değer etiketin yanında görünür; tutamacın üstündeki balon sürüklerken ve klavyeyle odaklanınca belirir.

Düzey

Kaydırın ya da ok tuşlarını kullanın.

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

export default function Default() {
  return <Slider label="Düzey" defaultValue={40} description="Kaydırın ya da ok tuşlarını kullanın." className="max-w-sm" />;
}

Aralık

[alt, üst] değeri iki tutamaç çizer; minStepsBetweenValues aralarındaki en küçük boşluktur.

Aralık

20 – 60

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

export default function Range() {
  return <Slider label="Aralık" defaultValue={[20, 60]} minStepsBetweenValues={5} className="max-w-sm" />;
}

Biçim

format Intl.NumberFormat seçenekleridir; değer Provider dilinde yazılır ve okunur.

Düzey

%25

Süre

12 gün

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

export default function Formatted() {
  return (
    <div className="flex max-w-sm flex-col gap-xl">
      <Slider label="Düzey" defaultValue={0.25} min={0} max={1} step={0.05} format={{ style: 'percent' }} />
      <Slider label="Süre" defaultValue={12} min={0} max={30} format={{ style: 'unit', unit: 'day', unitDisplay: 'long' }} />
    </div>
  );
}

İşaretler

marks izin altına çentik ve etiket koyar; ekran okuyucuya okunmaz.

Düzey

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

export default function Marks() {
  return (
    <Slider
      label="Düzey"
      defaultValue={50}
      step={25}
      marks={[{ value: 0, label: 'Az' }, { value: 25 }, { value: 50, label: 'Orta' }, { value: 75 }, { value: 100, label: 'Çok' }]}
      className="max-w-sm"
    />
  );
}

Devre dışı

Tutamaç ve iz soluklaşır.

Düzey

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

export default function Disabled() {
  return <Slider label="Düzey" defaultValue={40} disabled className="max-w-sm" />;
}

Açık ve koyu mod

Dolu iz birincil işlem rengindedir.

Aralık

20 – 60

Aralık

20 – 60

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

export default function Range() {
  return <Slider label="Aralık" defaultValue={[20, 60]} minStepsBetweenValues={5} className="max-w-sm" />;
}