Components · Tabs

Tab patterns

Yedi tab varyantı — birincil panel underline'dan settings sidebar'ına, KPI stat-tab'lardan WhatsApp dark moduna kadar. Hepsi aynı tipografik ölçek ve renk token'larını kullanır.

01 · Underline

Birincil pattern — sayfa içi içerik geçişi (Sipariş panosu, Müşteri detay)
Aktif tab içeriği bu alanda görüntülenir.

01b · Soft pill

Underline alternatifi — kayan beyaz pill + emerald glow, daha modern ve "premium" hissiyat
İki mod: Üstte gri yüzey üzerinde "lifted" beyaz pill (hero/dashboard üstü için). Altta beyaz yüzey üzerinde içeride gray-100 fill (panel toolbar için). Active state hafif emerald glow + tabular dot ile ekstra bilgi taşır.

02 · Segmented

2–4 kısa seçenek — toolbar/header içinde inline kullanım

03 · Pill

Filterable taxonomy — birden fazla seçim olabilir, scroll edilebilir

04 · Card-shell

Detay panel — tablar üst gri şeritte, içerik aynı kart içinde
Aktif tab içeriği bu alanda görüntülenir. Tab değişimi içerik bölümünü günceller; tab bar sabit kalır.

05 · Vertical sidebar

Settings sayfaları — gruplu navigation + sağda ayar formu

Genel Bilgiler

İşletmenizin temel bilgileri. Bu bilgiler WhatsApp üzerinden müşteriye gösterilen yanıtlarda kullanılır.

İşletme adıWhatsApp profilinde görünür.
SektörPanel davranışını belirler.
İletişim numarasıMüşteri hattı.

06 · Stat-tab

Dashboard üstü — KPI olarak çift işlev: gösterge + filtre

07 · Dark

Marketing/sektör seçici, koyu yüzey üstünde — WhatsApp yeşili accent
Sektör spesifik içerik ve özellikler bu alanda görüntülenir.

Yapı kuralları

· Underline default — sayfa içi tab geçişlerinde ilk tercih. border-bottom: 2px solid var(--primary) active state, 12px 4px padding.
· Segmented 2–4 kısa seçenek için (date-range, view-toggle). 4'ten fazla seçenekte underline veya pill kullan.
· Pill filtreleme ihtiyacında — birden fazla aktif olabilir veya scroll horizontal olabilir.
· Card-shell detay sayfalarında — tablar gri üst şeritte, alt panel beyaz; bütün card'ı sarar.
· Vertical settings için — gruplu nav, sağda form. 220px nav genişliği standart.
· Stat-tab dashboard üstünde KPI + filtre çift işlev.
· Dark marketing yüzleri için — accent #25d366 WhatsApp yeşili.
· Sayaç badge'i: aktif tab'da --primary-100 bg + primary text; pasif tab'da #f3f4f6 bg + muted text.
· Counter badge ile dot-new kullanımı: badge sayı için, dot ise "yeni içerik var" sinyali için.
· Tab text 14px / weight 500 default, active state weight 600. Geçiş color .15s.
· Klavye erişimi: tab'lar gerçek <button> elementi olmalı; arrow key navigation ARIA tabs pattern ile.