Bileşenler
Text
Gövde metni, etiket, açıklama ve rakamları token tipografisiyle yazar.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”Text etkileşimli değildir; bir <span> (ya da render ile verilen öğe) olarak akışta durur.
| Durum | Destek | Görsel değişiklik |
|---|---|---|
| Varsayılan | Var | Boyut, kalınlık ve tona göre tip stili ve renk |
| Üzerine gelme, basılı, odak, devre dışı, seçili | Yok | Yok; Text etkileşimli değildir |
Kısaltılmış (truncate) |
Var | 1-6 satırdan sonra üç nokta |
Uzun metin, truncate yok |
Var | Satır kırılır; metin kesilmez |
Ölçüler
Bölüm başlığı “Ölçüler”| Boyut / kalınlık | Yazı / satır yüksekliği | Tip stili |
|---|---|---|
sm / regular |
12 px / 16 px | body-sm |
sm / medium |
12 px / 16 px | label-sm |
md / regular |
14 px / 20 px | body-md |
md / medium |
14 px / 20 px | label-md |
lg / regular |
16 px / 24 px | body-lg |
lg / medium |
Yok: 16 px etiket token’ı tanımlı değil | - |
Kenar boşluğu sıfırdır. numeric rakamları tabular-nums ile eşit genişliğe getirir. truncate line-clamp-1 ile line-clamp-6 arasını kullanır.
Token’lar
Bölüm başlığı “Token’lar”Değerler seçili markaya göre gösterilir; markayı üst çubuktan değiştirebilirsiniz.
tone |
Token |
|---|---|
default |
color-text-default |
subtle |
color-text-subtle |
subtlest |
color-text-subtlest |
inverse |
color-text-inverse |
danger |
color-text-danger |
success |
color-text-success |
warning |
color-text-warning |
info |
color-text-info |
| 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-text-subtlest | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-success | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-text-warning | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 | |
--bigbang-color-text-info | #0068a5#0068a5#0068a5 | #a9d7ff#a9d7ff#a9d7ff |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Hareket | Azaltılmış hareket |
|---|---|---|
| Giriş, çıkış, durum değişimi | Yok: Text hareket etmez; yalnızca yerleşim ve tipografi belirler | Azaltılacak bir şey yok |
Hareket ayrıntıları için Hareket sayfasına bakın.