Bileşenler
Table
Küçük, salt okunur verileri anlamsal bir HTML tablosunda gösterir.
- 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 | Saydam gövde ve üst bilgi; üst bilginin altında daha koyu 1 px çizgi, satırlar arasında 1 px çizgi; yapışkan üst bilgi yükseltilmiş zeminde | table-header-background, table-header-foreground, table-header-border, table-border, color-surface-raised |
| Şeritli | striped |
Her ikinci gövde satırı boyanır | table-row-background-striped |
| Üzerine gelme | hoverable (varsayılan açık) |
Gövde satırı boyanır; yükselme yok. İçinde açılmış bir açılır öğe (aria-expanded="true") olan satır boyalı kalır |
table-row-background-hovered |
| Seçili | selected satır |
Seçili arka plan, data-selected |
table-row-background-selected |
| Odak | Kaydırma bölgesi | 2 px halka, bölgenin içinde | color-focus-ring, border-width-focus |
| Basılı, devre dışı | Yok | Table etkileşimsizdir | - |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Hücre yatay iç boşluğu | 8 px; onay kutusu hücresinin sonunda 0 | table-cell-padding-inline |
Hücre dikey iç boşluğu, compact |
4 px (en az 32 px satır) | table-cell-padding-block-compact |
Hücre dikey iç boşluğu, standard (varsayılan) |
8 px (en az 40 px satır) | table-cell-padding-block-standard |
Hücre dikey iç boşluğu, comfortable |
12 px (en az 48 px satır) | table-cell-padding-block-comfortable |
Başlık satırı yüksekliği, standard |
40 px | table-header-height |
| Satır çizgisi | 1 px; son gövde satırının altında yok, onun yerine alt bilginin üstünde çizgi var | table-border, border-width-default |
| Üst bilgi stili | 12 px / 16 px, orta kalın, ikincil metin, büyük harfe çevrilmez | label-sm |
| Hücre stili | 14 px / 20 px | body-md |
| Başlık stili | 16 px / 24 px, yarı kalın | heading-sm |
| Başlık altı boşluk | 8 px | space-md |
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz. Table token’ları anlamsal token’lara bağlıdır, bu yüzden moda göre değişir.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-table-header-background | rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0)rgba(0, 0, 0, 0)rgba(0, 0, 0, 0) | |
--bigbang-table-header-foreground | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-table-row-background-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-table-row-background-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-table-row-background-striped | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-table-border | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-table-cell-padding-inline | 8px8px8px | 8px8px8px | |
--bigbang-table-cell-padding-block-compact | 4px4px4px | 4px4px4px | |
--bigbang-table-cell-padding-block-standard | 8px8px8px | 8px8px8px | |
--bigbang-table-header-height | 40px40px40px | 40px40px40px | |
--bigbang-table-cell-padding-block-comfortable | 12px12px12px | 12px12px12px | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
Satır üzerine gelme (hoverable) |
Arka plan rengi, motion-hover-duration (110 ms), motion-hover-easing (motion.hover); satır asla yükselmez |
Aynı; yalnızca renk |
| Seçili satır | Arka plan rengi aynı hızla değişir | Aynı |
| Odak | Halka hemen görünür (0 ms) | Aynı |
| Kaydırma, sabit üst bilgi | Tarayıcı kaydırması; ek animasyon yok | Aynı |
Değerler token’lardan gelir; ayrıntılar için Hareket sayfasına bakın.