Bileşenler
InfoPopover
Bir etiketin ya da değerin yanında, basınca kısa bir açıklama açan küçük bilgi butonu.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Kapalı | Yalnızca bilgi butonu | Yok |
| Buton üzerine gelme / basma | Durum katmanı ve basma ölçeği | motion-press-duration |
| Açık | Oklu panel, 1 px kaplama çizgisi, küçük gölge | color-surface-raised, color-border-overlay, shadow-popup |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Buton | 32 × 32 px, yuvarlak | button-height-sm |
| Panel genişliği | 240 px | popover-width-sm |
| İç boşluk | 10 px | popover-padding |
| Metin stili | body-md |
text.body-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.
| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-popover-padding | 10px10px10px | 10px10px10px | |
--bigbang-popover-gap | 10px10px10px | 10px10px10px | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-shadow-popup | 0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549)0px 4px 6px -1px rgba(0, 0, 0, 0.10196078431372549), 0px 2px 4px -2px rgba(0, 0, 0, 0.10196078431372549) | 0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804)0px 4px 6px -1px rgba(0, 0, 0, 0.3215686274509804), 0px 2px 4px -2px rgba(0, 0, 0, 0.3215686274509804) | |
--bigbang-motion-popover-enter-duration | 0.15s0.15s0.15s | 0.15s0.15s0.15s | |
--bigbang-motion-popover-exit-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
Giriş (motion.popover) |
opacity, scale 0.96 → 1 tetikleyiciden, 4 px kayma |
motion-popover-enter-duration |
motion-popover-enter-easing |
Ölçek 1, mesafe 0; yalnızca belirir. |
| Çıkış | opacity, scale 1 → 0.96 |
motion-popover-exit-duration |
motion-popover-exit-easing |
Yalnızca söner. |
| Tetikleyici | Basma ölçeği (motion.press) |
motion-press-duration |
motion-press-easing |
Ölçek 1 olur. |
Panel tetikleyicinin konumundan büyür (--transform-origin). Değerler için Hareket sayfasına bakın.