Bileşenler
PreviewCard
Üzerine gelinince ya da odaklanınca gideceği yerin kısa önizlemesini gösteren bağlantı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Kapalı | Satır içi bağlantı | color-text-link |
| Üzerine gelme | Bağlantı rengi koyulaşır | color-text-link-hovered |
| Odak | Bağlantının 2 px dışına 2 px odak çizgisi | color-focus-ring, focus-offset |
| Açık | Ortak açılır yüzey: yükseltilmiş yüzey, ince kenar çizgisi, açılır gölge | color-surface-raised, color-border-overlay, shadow-popup |
Ö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ğlantıya uzaklık | 8 px | - |
| Köşe yarıçapı | 10 px | popover-radius (radius-lg) |
Token’lar
Bölüm başlığı “Token’lar”| Token | Örnek | Açık mod | Koyu mod |
|---|---|---|---|
--bigbang-color-text-link | #125768#171717#171717 | #77bacf#fafafa#fafafa | |
--bigbang-color-text-link-hovered | #0e414f#404040#404040 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--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-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 |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”Kart motion.popover ile bağlantıdan büyüyerek ve solarak açılır, daha hızlı kapanır. Hareketi azaltma tercihinde yalnızca saydamlık değişir.