Bileşenler
ContextMenu
Bir alana sağ tıklayınca ya da basılı tutunca işaretçinin yanında açılan işlem menüsü.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”Öğe durumları DropdownMenu ile aynıdır.
| 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, 4 px iç boşluk | color-surface-raised, color-border-overlay, shadow-popup, menu-radius, menu-inset |
| Vurgulu öğe | Seçili yüzey dolgusu | color-surface-selected |
| Tehlike öğesi | Tehlike metni | color-text-danger |
| Devre dışı öğe | Devre dışı metin | color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Ekran kenarına en az uzaklık | 16 px | space-xl |
| Öğe ölçüleri | DropdownMenu ile aynı | - |
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-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--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-menu-radius | 10px10px10px | 10px10px10px | |
--bigbang-menu-item-radius | 6px6px6px | 6px6px6px | |
--bigbang-menu-inset | 4px4px4px | 4px4px4px |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Menü motion.popover ile işaretçinin konumundan büyüyerek açılır, daha hızlı kapanır. Hareketi azaltma tercihinde yalnızca saydamlık değişir.