Bileşenler
Popconfirm
Bir düğmenin yanında açılan, hafif bir işlem öncesinde evet ya da hayır soran küçük onay paneli.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Açık | Ortak açılır yüzey: yükseltilmiş yüzey, ince kenar çizgisi, açılır gölge, 10 px köşe | color-surface-raised, color-border-overlay, shadow-popup, popover-radius |
| Tehlike | Onay düğmesi tehlike tonunda | color-action-danger-default |
| Yükleniyor | Onay düğmesinde yükleniyor, Vazgeç devre dışı | Button ile aynı |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Genişlik | 240 px | popover-width-sm |
| İç boşluk | 10 px | popover-padding |
| Düğmeler | 32 px, aralarında 6 px | button-height-sm, space-sm |
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--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-popover-radius | 10px10px10px | 10px10px10px | |
--bigbang-popover-width-sm | 240px240px240px | 240px240px240px | |
--bigbang-popover-padding | 10px10px10px | 10px10px10px | |
--bigbang-popover-gap | 10px10px10px | 10px10px10px | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-space-sm | 6px6px6px | 6px6px6px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Panel motion.popover ile tetikleyiciden büyüyerek açılır, daha hızlı kapanır. Düğmeler motion.press kullanır.