Bileşenler
Popover
Bir butona bağlı açılan, etkileşimli içerik taşıyan kalıcı olmayan panel.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Kapalı | Görünmez; tetikleyici aria-expanded="false" |
Yok |
| Açılıyor | Tetikleyiciden büyüyerek belirir | motion-popover-enter-duration, motion-popover-scale |
| Açık | Yükseltilmiş panel, 1 px kaplama çizgisi (yer kaplamaz), küçük gölge | color-surface-raised, color-border-overlay, shadow-popup |
| Kapanıyor | Küçülerek söner | motion-popover-exit-duration |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Genişlik | 240 / 320 / 400 px | popover-width-sm, popover-width-md, popover-width-lg |
| İç boşluk | 10 px | popover-padding |
| Başlık ile gövde arası | 10 px | popover-gap |
| Varsayılan hizalama | Tetikleyicinin ortası (align="center") |
Yok |
| Köşe yarıçapı | 10 px | popover-radius |
| Tetikleyiciye uzaklık | 4 px (oklu 10 px); tüm açılır pencereler aynı uzaklığı kullanır | popup-offset |
| Görünüm kenarına en az uzaklık | 16 px | Yok |
| Başlık stili | label-md |
text.label-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-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-popover-width-md | 320px320px320px | 320px320px320px | |
--bigbang-popover-width-lg | 400px400px400px | 400px400px400px | |
--bigbang-popover-padding | 10px10px10px | 10px10px10px | |
--bigbang-popover-radius | 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 | |
--bigbang-motion-popover-enter-easing | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9)cubic-bezier(0, 0, 0.38, 0.9) | |
--bigbang-motion-popover-exit-easing | cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9) | cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9)cubic-bezier(0.2, 0, 1, 0.9) | |
--bigbang-motion-popover-scale | 0.960.960.96 | 0.960.960.96 | |
--bigbang-motion-popover-distance | 4px4px4px | 4px4px4px |
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.