Bileşenler
Accordion
Her biri bir içerik bölümünü açıp kapatan başlıklar yığını.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Varsayılan | Başlık koyu, ok soluk | color-fg-subtle |
| Üzerine gelme | line: başlık metninin altı çizilir. contained: düğme arka planı bir ton koyulaşır |
color-action-subtle-hovered (contained) |
| Basılı | Yalnız contained: arka plan bir ton daha koyulaşır |
color-action-subtle-pressed |
| Açık | Ok 180° döner, panel görünür | Yok |
| Odak | 3 px odak halesi; contained görünümde kutunun içinde |
color-focus-ring |
| Devre dışı | Soluk metin ve ok, not-allowed imleci |
Yok |
line |
Yalnız öğeler arasında çizgi; ilk öğenin üstünde ve son öğenin altında çizgi yok, yatay iç boşluk yok | color-line-subtle |
contained |
Her öğe kenarlıklı yükseltilmiş kutu | color-line-default, color-surface-raised |
Ölçüler
Bölüm başlığı “Ölçüler”| Boyut | Düğme yüksekliği | İç boşluk | Başlık metni | Panel iç boşluğu |
|---|---|---|---|---|
sm (varsayılan) |
En az 36 px (button-height-md) |
accordion-padding-block-sm (10 px) dikey; contained görünümde space-sm yatay |
text-label-md |
Altta accordion-padding-block-sm |
md |
En az 40 px (button-height-lg) |
accordion-padding-block-md (12 px) dikey; contained görünümde space-md yatay |
text-heading-sm |
Altta accordion-padding-block-md |
Panel metni text-body-md, açıklama text-body-sm boyutundadır. line görünümde başlık ve panelin yatay iç boşluğu yoktur; metin, akordeonun çevresindeki içerikle aynı hizada durur. contained görünümde panelin yatay iç boşluğu başlıkla aynıdır. Ok ve isteğe bağlı simge başlığın ilk satırında durur. contained görünümde köşe yarıçapı radius-md, öğeler arası boşluk space-sm kadardı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.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-button-height-md | 36px36px36px | 36px36px36px | |
--bigbang-button-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-accordion-padding-block-sm | 10px10px10px | 10px10px10px | |
--bigbang-accordion-padding-block-md | 12px12px12px | 12px12px12px | |
--bigbang-color-line-subtle | | | |
--bigbang-color-line-default | | | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--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-color-fg-subtle | | |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Panel açılır | opacity 0 → 1, translate 4 px |
motion-collapsible-duration (150 ms) |
motion-collapsible-easing |
Yalnızca solma; mesafe 0 (motion-collapsible-distance). |
| Ok döner | rotate 180° |
motion-collapsible-icon-duration (150 ms) |
easing-productive |
Anında döner. |
Üzerine gelme ve basılı renk (contained) |
background-color |
motion-hover-duration |
motion-hover-easing |
Değişmez; yalnızca renk geçişidir. |
| Panel kapanır | Yok | Yok | Yok | Anında kapanır. |
Yükseklik bir anda değişir ve hiçbir zaman animasyonlanmaz (MOT-02). Değerler için Hareket sayfasına bakın.