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
Kurulum
Bölüm başlığı “Kurulum”- Paket
@bigbang/ui- İçe aktarma
import { Slider } from '@bigbang/ui';- Kaynak
- Slider.tsx
- Storybook
- Slider · Playground
Slider, @bigbang/ui paketindedir.
import { Slider } from '@bigbang/ui';
<Slider label="Düzey" value={level} onValueChange={setLevel} onValueCommitted={save} />;Özellikler
Bölüm başlığı “Özellikler”labelZorunlu- Açıklama
- Görünen etiket; kaydırıcıyı adlandırır.
- Tür
string
description- Açıklama
- Kaydırıcının altındaki yardım metni;
aria-describedbyile bağlanır. - Tür
ReactNode
value- Açıklama
- Kontrol ettiğinizde değer: bir sayı ya da iki tutamaçlı aralık için
[alt, üst].onValueChangeile birlikte verin. - Tür
Value
defaultValue- Açıklama
- Kontrolsüz kaydırıcının ilk değeri;
[alt, üst]aralık yapar. - Tür
Value
onValueChange- Açıklama
- Kullanıcı sürüklerken ya da tuşa basarken her değişiklikte çağrılır.
- Tür
(value: T) => void
onValueCommitted- Açıklama
- Kullanıcı bırakınca ya da klavyeyle bitirince bir kez çağrılır. Ağır işler için kullanın.
- Tür
(value: T) => void
min- Açıklama
- En küçük değer.
- Tür
number- Varsayılan
0
max- Açıklama
- En büyük değer.
- Tür
number- Varsayılan
100
step- Açıklama
- Bir ok tuşunun ya da yaslanmanın değiştirdiği miktar.
- Tür
number- Varsayılan
1
largeStep- Açıklama
- Page Up, Page Down ve Shift + okun değiştirdiği miktar.
- Tür
number- Varsayılan
10
minStepsBetweenValues- Açıklama
- Aralığın iki tutamacı arasındaki en küçük boşluk, adım olarak.
- Tür
number- Varsayılan
0
format- Açıklama
- Görünen ve okunan değer için
Intl.NumberFormatseçenekleri, ör.{ style: 'percent' }ya da bir birim. - Tür
NumberFormatOptions
showValue- Açıklama
- Biçimlenmiş değeri etiketin yanında gösterir.
- Tür
boolean- Varsayılan
true
marks- Açıklama
- İzin altında çentikler; etiket isteğe bağlıdır.
- Tür
readonly SliderMark[]
orientation- Açıklama
- Yön: yatay ya da en az 160 px yüksekliğinde dikey. Dikey kaydırıcı baloncuk ve işaretleri göstermez.
- Tür
'horizontal' | 'vertical'- Varsayılan
'horizontal'
disabled- Açıklama
- Etkileşimi kapatır ve kaydırıcıyı soldurur.
- Tür
boolean- Varsayılan
false
name- Açıklama
- Alan adı; aralık aynı adla iki değer gönderir.
- Tür
string
className- Açıklama
- Kök öğeye eklenir; yalnızca yerleşim için kullanın.
- Tür
string
Veri öznitelikleri
Bölüm başlığı “Veri öznitelikleri”data-component="slider": kök öğe üzerinde.data-part:label,value,control,track,indicator,thumb,bubble,marks,description.- Base UI
data-dragging,data-disabled,data-orientationekler.