Bileşenler
Pagination
Tablo ve listelerin altında sayfa ya da imleç gezintisi ve sayfa boyutu seçimi sağlar.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Destek | Görsel değişiklik | Token’lar |
|---|---|---|---|
| Varsayılan | Var | Dolgusuz, çerçevesiz kontrol | color-text-default |
| Üzerine gelme | Var | Hafif dolgu | color-action-subtle-hovered |
| Basılı | Var | %97’ye küçülür; dolgu koyulaşır | motion-press-scale, color-action-subtle-pressed |
| Odak | Var | 2 px halka, 2 px uzaklıkta | color-focus-ring, border-width-focus |
| Geçerli sayfa | Var | Seçili yüzey ve güçlü kenarlık; aria-current="page" |
color-surface-selected, color-border-strong |
Etkisiz (uç, disabled) |
Var | Devre dışı renkleri; aria-disabled, odaklanabilir |
color-action-disabled-default, color-action-on-disabled-default |
| Yükleniyor | disabled ile |
Tüm kontroller etkisiz | - |
| Hata | Yok | Pagination hata göstermez | - |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
Öğe yüksekliği, md |
36 px | button-height-md |
Öğe yüksekliği, sm |
32 px | button-height-sm |
| En küçük sayfa genişliği | yüksekliğe eşit (kare) | button-height-md, button-height-sm |
| Öğeler arası | 2 px | space-xxs |
| Gruplar arası yatay boşluk | 24 px | space-3xl |
| Özet stili | 12 px / 16 px, tablo rakamlı | body-sm |
| Sayfa ve sayaç stili | 14 px / 20 px, orta kalınlık, tablo rakamlı | label-md |
| Yan yana düzene geçiş | 1024 px | - |
| Sayfa sayısı (uzun liste) | 2 × boundaryCount + 2 × siblingCount + 3 öğe |
- |
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-border-strong | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-space-xxs | 2px2px2px | 2px2px2px | |
--bigbang-motion-press-scale | 0.970.970.97 | 0.970.970.97 | |
--bigbang-motion-hover-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Basma | scale %97’ye iner (70 ms), bırakınca yaylanarak döner (motion.press) |
Ölçek 1; yalnızca renk değişir |
| Üzerine gelme, geçerli sayfa | Dolgu rengi motion-hover-duration (110 ms) sürede değişir |
Aynı |
| Odak | Halka hemen görünür (0 ms) | Aynı |
| Özet aralığı değişir | Yeni metin opacity 0 → 1, motion-skeleton-reveal-duration (110 ms) (motion.reveal) |
Aynı kısa geçiş |
| Sayfa listesi değişir | Hareket yok | Azaltılacak bir şey yok |
Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.