7. Genel Tasarım — Two-Column List
Bu adımda Two-Column List widget'ın görsel ayarları yapılır: Label kolon stili, Value kolon stili, satır arka planı, başlık ve kenarlık.
Sihirbaz rotası: /cartography/add/generaldesign
Ön Koşul
Two-Column List akışının 1, 2, 3, 4. adımları tamamlanmış olmalıdır (5, 6 atlanır).
1. Ekran Düzeni
Sol tarafta yapılandırma formu, sağ tarafta canlı liste önizlemesi yer alır.
2. Chart Title
| Alan | Açıklama |
|---|---|
| Show Title | Başlık görünürlüğü (toggle) |
| Title Text | Başlık metni (örn. "Vardiya Özeti") |
| Title Color | Yazı rengi |
| Title Font Size | Font boyutu (px) |
| Title Font Weight | Normal / Bold / SemiBold |
| Title Background Color | Arka plan rengi |
| Title Border Color | Çerçeve rengi |
| Title Border Width | Çerçeve kalınlığı (px) |
| Title Alignment | Sol / Orta / Sağ |
3. Label Column Style
| Alan | Açıklama |
|---|---|
| Label Color | Label yazı rengi |
| Label Font Size | Label font boyutu (px) |
| Label Alignment | Sol / Orta / Sağ |
| Label Font Weight | Normal / Bold / SemiBold |
Label Stili
Label'lar genelde Bold veya SemiBold yapılır; renk biraz mat (örn. #374151) tutulur. Label = Bold + Value = Normal kombinasyonu okunabilirliği artırır.
4. Value Column Style
| Alan | Açıklama |
|---|---|
| Value Color | Value yazı rengi |
| Value Font Size | Value font boyutu (px) |
| Value Alignment | Sol / Orta / Sağ |
| Value Font Weight | Normal / Bold |
Value Hizalama
- Sayısal değerler için Value Alignment = Sağ (rakamlar dikey hizalanır).
- Metin değerleri için Sol veya Sağ kullanılabilir.
5. Row Settings
| Alan | Açıklama |
|---|---|
| Row Background Color | Satır arka plan rengi |
| Alternating Row Color | Tek/çift satır farklı renk |
| Row Height | Satır yüksekliği (px) |
Alternating Row Color
Açık gri ve beyaz dönüşümlü satırlar 7+ satırlı listelerde okunabilirliği artırır.
6. Border (Hücre Kenarlığı)
| Alan | Açıklama |
|---|---|
| Border Color | Hücre kenarlık rengi |
| Border Width | Çizgi kalınlığı (px) |
7. Onaylama
Sağ üstteki Next butonuna tıkladığınızda flow.hasGeneralDesign = true işaretlenir.