Bileşenler
PhoneInput
Ülke kodu seçicili telefon alanı; Türkiye varsayılan, E.164 olarak gönderilir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Durumlar
Bölüm başlığı “Durumlar”| Durum | Görsel değişiklik | Token’lar |
|---|---|---|
| Boş | Ülke kodu ve boş numara | color-border-input |
| Liste açık | Ok yarım tur döner, liste belirir | shadow-overlay, color-surface-raised |
| Odak | Kutuda odak kenarlığı ve halka | color-border-focus, color-focus-ring |
| Geçersiz | Tehlike kenarlığı, hata metni | color-border-danger, color-text-danger |
| Devre dışı | Soluk kutu ve seçici | color-surface-disabled, color-text-disabled |
Ölçüler
Bölüm başlığı “Ölçüler”| Özellik | Değer | Token |
|---|---|---|
| Yükseklik | 32 / 36 / 40 px | input-height-sm, input-height-md, input-height-lg |
| Seçici ile numara arası | 1 px çizgi, 6 px boşluk | color-border-default, space-sm |
| Liste öğesi | 6 px dikey iç boşluk | space-sm |
| Liste uzaklığı | 8 px | space-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-input-height-md | 36px36px36px | 36px36px36px | |
--bigbang-input-height-lg | 40px40px40px | 40px40px40px | |
--bigbang-input-radius | 10px10px10px | 10px10px10px | |
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-surface-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-shadow-overlay | 0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963) | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Hareket ve etkileşim
Bölüm başlığı “Hareket ve etkileşim”| Etkileşim | Özellik | Süre token’ı | Easing token’ı | Hareketi azaltma |
|---|---|---|---|---|
| Liste açılır | Solar, ölçeklenir, 4 px kayar (motion.popover) |
motion-popover-enter-duration |
motion-popover-enter-easing |
Ölçek 1, mesafe 0; yalnızca solar. |
| Ok döner | rotate 180° (motion.collapsibleIcon) |
motion-collapsible-icon-duration |
easing-productive |
Süre kısalır. |
| Seçili ülke | İşaret büyür (motion.selectionMark) |
motion-selection-duration |
motion-selection-easing |
Ölçek 1. |
| Odak ve hata | Kenarlık rengi (motion.field) |
motion-focus-duration |
motion-focus-easing |
Değişmez. |
Değerler için Hareket sayfasına bakın.