Bileşenler

Düğmeler

Temel eylem bileşeni. wb-btn'i bir varyant ve isteğe bağlı boyut değiştiricisiyle birleştirin.

Varyantlar

<button class="wb-btn wb-btn-primary">Primary</button>
<button class="wb-btn wb-btn-secondary">Secondary</button>
<button class="wb-btn wb-btn-outline">Outline</button>
<button class="wb-btn wb-btn-ghost">Ghost</button>
<button class="wb-btn wb-btn-danger">Danger</button>
<button class="wb-btn wb-btn-success">Success</button>

Boyutlar

<button class="wb-btn wb-btn-primary wb-btn-sm">Small</button>
<button class="wb-btn wb-btn-primary">Default</button>
<button class="wb-btn wb-btn-primary wb-btn-lg">Large</button>

Durumlar

<button class="wb-btn wb-btn-primary" disabled>Disabled</button>
<button class="wb-btn wb-btn-primary wb-btn-loading">Loading</button>
<a href="#" class="wb-btn wb-btn-outline">Link button</a>

Rozetler

Küçük durum göstergeleri ve etiketler.

<span class="wb-badge">Default</span>
<span class="wb-badge wb-badge-primary">Primary</span>
<span class="wb-badge wb-badge-success">Success</span>
<span class="wb-badge wb-badge-warning">Warning</span>
<span class="wb-badge wb-badge-danger">Danger</span>
<span class="wb-badge wb-badge-info">Info</span>

Uyarılar

Satır içi geri bildirim mesajları. Kapatılabilir yapmak için data-wb-dismiss="alert" ekleyin.

<div class="wb-alert wb-alert-success">Kayıt başarıyla kaydedildi.</div>
<div class="wb-alert wb-alert-danger">Bir hata oluştu. Lütfen tekrar deneyin.</div>
<div class="wb-alert wb-alert-warning">Planınızın süresi 3 gün içinde dolacak.</div>
<div class="wb-alert wb-alert-info">Yeni bir sürüm mevcut.</div>

Kapatılabilir uyarı

<div class="wb-alert wb-alert-info">
  3 okunmamış bildiriminiz var.
  <button class="wb-alert-close" data-wb-dismiss="alert" aria-label="Close">&times;</button>
</div>

Kartlar

İsteğe bağlı başlık, gövde ve altbilgi ile genel amaçlı içerik kabı.

<div class="wb-card">
  <div class="wb-card-header">
    <h3 class="wb-card-title">Kart başlığı</h3>
    <p class="wb-card-subtitle">İsteğe bağlı alt başlık</p>
  </div>
  <div class="wb-card-body">
    Kart içeriği buraya gelir.
  </div>
  <div class="wb-card-footer">
    <button class="wb-btn wb-btn-primary wb-btn-sm">Kaydet</button>
    <button class="wb-btn wb-btn-ghost wb-btn-sm">İptal</button>
  </div>
</div>

İstatistik Kartları

Dashboard KPI kartları — wb-card içinde wb-stat kullanın.

<div class="wb-card wb-stat">
  <div class="wb-stat-label">Total Users</div>
  <div class="wb-stat-value">12,480</div>
  <div class="wb-stat-change wb-stat-up">+8.4% this month</div>
</div>

Formlar

Metin girdileri, seçiciler, onay kutuları, radyo düğmeleri, geçiş anahtarları ve metin alanları.

Metin girdileri

<div class="wb-field">
  <label class="wb-label">Full name</label>
  <input type="text" class="wb-input" placeholder="Jane Smith">
</div>

<div class="wb-field">
  <label class="wb-label">Email</label>
  <input type="email" class="wb-input" placeholder="jane@example.com">
  <p class="wb-field-hint">We'll never share your email.</p>
</div>

<!-- Hata durumu -->
<div class="wb-field">
  <label class="wb-label">Invalid field</label>
  <input type="text" class="wb-input is-invalid" value="bad value">
  <p class="wb-field-error">This field is required.</p>
</div>

Seçici & Metin Alanı

<div class="wb-field">
  <label class="wb-label">Status</label>
  <select class="wb-select">
    <option>Active</option>
    <option>Inactive</option>
  </select>
</div>

<div class="wb-field">
  <label class="wb-label">Notes</label>
  <textarea class="wb-textarea" rows="3"></textarea>
</div>

Onay Kutuları, Radyolar & Geçiş Anahtarı

<label class="wb-check"><input type="checkbox"> Enable notifications</label>
<label class="wb-radio"><input type="radio" name="r1"> Option A</label>

<!-- Geçiş anahtarı -->
<label class="wb-switch-label">
  <input type="checkbox" class="wb-switch" checked>
  <span>Active</span>
</label>

Tablolar

İsteğe bağlı çizgili ve hover değiştiricileriyle duyarlı veri tabloları.

<table class="wb-table wb-table-striped">
  <thead>
    <tr><th>Name</th><th>Role</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Chen</td>
      <td>Admin</td>
      <td><span class="wb-badge wb-badge-success">Active</span></td>
    </tr>
  </tbody>
</table>

Değiştiriciler: wb-table-striped · wb-table-hover · wb-table-bordered · wb-table-sm

Modal

İletişim kutusu katmanı. WBModal.open(id) veya data-wb-toggle="modal" ile açılır.

<!-- Tetikleyici -->
<button class="wb-btn wb-btn-primary"
        data-wb-toggle="modal"
        data-wb-target="#my-modal">Open modal</button>

<!-- Modal -->
<div class="wb-modal" id="my-modal">
  <div class="wb-modal-backdrop" data-wb-dismiss="modal"></div>
  <div class="wb-modal-dialog">
    <div class="wb-modal-header">
      <h4 class="wb-modal-title">İşlemi onayla</h4>
      <button class="wb-modal-close" data-wb-dismiss="modal">&times;</button>
    </div>
    <div class="wb-modal-body">
      Devam etmek istediğinizden emin misiniz?
    </div>
    <div class="wb-modal-footer">
      <button class="wb-btn wb-btn-ghost" data-wb-dismiss="modal">İptal</button>
      <button class="wb-btn wb-btn-primary">Onayla</button>
    </div>
  </div>
</div>

JS API

WBModal.open('my-modal');
WBModal.close('my-modal');

Çekmece

Odak tuzaklı yan panel katmanı. Sağ, sol, üst ve alt yerleşimleri destekler.

<!-- Tetikleyici -->
<button data-wb-toggle="drawer" data-wb-target="#my-drawer">Aç</button>

<!-- Çekmece (varsayılan: sağ) -->
<div class="wb-drawer wb-drawer-right" id="my-drawer">
  <div class="wb-drawer-backdrop" data-wb-dismiss="drawer"></div>
  <div class="wb-drawer-panel">
    <div class="wb-drawer-header">
      <h4 class="wb-drawer-title">Panel başlığı</h4>
      <button class="wb-drawer-close" data-wb-dismiss="drawer">&times;</button>
    </div>
    <div class="wb-drawer-body">
      Çekmece içeriği buraya.
    </div>
  </div>
</div>

<!-- Yerleşim varyantları -->
<div class="wb-drawer wb-drawer-left" id="left-drawer">...</div>
<div class="wb-drawer wb-drawer-top"  id="top-drawer">...</div>
<div class="wb-drawer wb-drawer-bottom" id="btm-drawer">...</div>

<!-- Genişlik varyantları -->
<div class="wb-drawer wb-drawer-right wb-drawer-sm">...</div>
<div class="wb-drawer wb-drawer-right wb-drawer-lg">...</div>
<div class="wb-drawer wb-drawer-right wb-drawer-xl">...</div>

Açılır Menü

Tıklamayla tetiklenen menü. Dışarı tıklamada ve Escape tuşunda kapanır.

<div class="wb-dropdown">
  <button class="wb-btn wb-btn-outline" data-wb-toggle="dropdown">
    Actions ▾
  </button>
  <div class="wb-dropdown-menu">
    <a href="#" class="wb-dropdown-item">Edit</a>
    <a href="#" class="wb-dropdown-item">Duplicate</a>
    <div class="wb-dropdown-divider"></div>
    <a href="#" class="wb-dropdown-item wb-dropdown-item-danger">Delete</a>
  </div>
</div>

Sekmeler

Sekmeli içerik paneli. JS geçişi yönetir; is-active geçerli sekmeyi ve paneli işaretler.

<div class="wb-tabs" id="my-tabs">
  <div class="wb-tab-list">
    <button class="wb-tab-item is-active" data-wb-tab="tab1">Overview</button>
    <button class="wb-tab-item" data-wb-tab="tab2">Activity</button>
  </div>
  <div class="wb-tab-panels">
    <div class="wb-tab-panel is-active" id="tab1">Overview content</div>
    <div class="wb-tab-panel" id="tab2">Activity content</div>
  </div>
</div>

Akordeon

Daraltılabilir içerik bölümleri.

<div class="wb-accordion">
  <div class="wb-accordion-item is-open">
    <button class="wb-accordion-trigger">Birinci soru?</button>
    <div class="wb-accordion-body">Cevap metni buraya.</div>
  </div>
  <div class="wb-accordion-item">
    <button class="wb-accordion-trigger">İkinci soru?</button>
    <div class="wb-accordion-body">Cevap metni buraya.</div>
  </div>
</div>

Toast

Programatik bildirim mesajları. WBToast.show() ile gösterilir.

// Temel
WBToast.show('Settings saved.');

// Türle birlikte
WBToast.show('Record created!', { type: 'success' });
WBToast.show('Something went wrong.', { type: 'error' });
WBToast.show('Please review.', { type: 'warning' });

// Özel süre (ms)
WBToast.show('Auto-closes in 2s.', { duration: 2000 });

// Konum ile (varsayılan: top-right)
WBToast.show('Bottom center!', { position: 'bottom-center' });

Konum değerleri: top-right · top-center · top-left · bottom-center · bottom-left

Popover

Zengin içerikli bağlantılı katman. Dört yerleşim varyantını destekler.

<div class="wb-popover-wrapper">
  <button class="wb-btn wb-btn-outline" data-wb-toggle="popover">
    Tıklayın
  </button>
  <div class="wb-popover wb-popover-top">
    <div class="wb-popover-title">Popover başlığı</div>
    <div class="wb-popover-body">Popover içeriği buraya.</div>
  </div>
</div>

<!-- Yerleşimler: wb-popover-top / -right / -bottom / -left -->

Araç İpucu

data-wb-tooltip özniteliği aracılığıyla basit hover/odak araç ipucu.

<button data-wb-tooltip="Saves your work"
        data-wb-tooltip-placement="top">
  Save
</button>

<!-- Yerleşimler: top (varsayılan) / right / bottom / left -->

Avatar

Boyut varyantları ve baş harfli yedekle kullanıcı resmi yer tutucusu.

JD AB CD EF

<!-- Baş harfler -->
<span class="wb-avatar wb-avatar-xl">JD</span>
<span class="wb-avatar wb-avatar-lg">AB</span>
<span class="wb-avatar">CD</span>
<span class="wb-avatar wb-avatar-sm">EF</span>

<!-- Resim -->
<img src="user.jpg" class="wb-avatar" alt="User">

Sayfalama

Sayfa gezinme bağlantıları.

<nav class="wb-pagination">
  <a href="#" class="wb-page-item wb-page-prev">← Prev</a>
  <a href="#" class="wb-page-item">1</a>
  <a href="#" class="wb-page-item is-active">2</a>
  <a href="#" class="wb-page-item">3</a>
  <span class="wb-page-item wb-page-ellipsis">…</span>
  <a href="#" class="wb-page-item wb-page-next">Next →</a>
</nav>

Breadcrumb

Hiyerarşik gezinme izi.

<nav class="wb-breadcrumb">
  <a href="#" class="wb-crumb">Home</a>
  <span class="wb-crumb-sep">/</span>
  <a href="#" class="wb-crumb">Users</a>
  <span class="wb-crumb-sep">/</span>
  <span class="wb-crumb is-active">Alice Chen</span>
</nav>

Skeleton

İçerik alanları için yükleme yer tutucusu.

<div class="wb-skeleton" style="height:1rem; width:60%"></div>
<div class="wb-skeleton" style="height:1rem; width:90%"></div>
<div class="wb-skeleton" style="height:1rem; width:75%"></div>
<div class="wb-skeleton" style="height:2.5rem; width:120px; border-radius:var(--wb-r-md)"></div>

Boş Durum

Bir liste veya tabloda veri olmadığında gösterilen yer tutucu.

<div class="wb-empty">
  <div class="wb-empty-icon">📭</div>
  <h4 class="wb-empty-title">No results found</h4>
  <p class="wb-empty-desc">Try adjusting your search or filter.</p>
  <button class="wb-btn wb-btn-primary wb-btn-sm">Clear filters</button>
</div>

Spinner & Yükleniyor

Sayfa düzeyinde geçişler için satır içi spinner, ilerleme çubuğu ve yükleme çubuğu.

Spinner

<div class="wb-spinner wb-spinner-sm"></div>
<div class="wb-spinner"></div>
<div class="wb-spinner wb-spinner-lg"></div>

İlerleme çubuğu

<div class="wb-progress-bar">
  <div class="wb-progress-fill" style="width:65%"></div>
</div>

<!-- Anlamsal varyantlar -->
<div class="wb-progress-bar">
  <div class="wb-progress-fill wb-progress-success" style="width:40%"></div>
</div>

Ayraç

Yatay, dikey veya etiketli ayırıcı çizgiler.

<!-- Basit -->
<div class="wb-divider"></div>

<!-- Etiketli -->
<div class="wb-divider wb-divider-labeled">
  <span>or continue with</span>
</div>

<!-- Dikey (flex kapsayıcı içinde) -->
<div class="wb-divider wb-divider-vertical"></div>

Liste Grubu

Dikey yığılmış öğe listesi.

<ul class="wb-list">
  <li class="wb-list-item is-active">Dashboard</li>
  <li class="wb-list-item">Users</li>
  <li class="wb-list-item">Reports</li>
</ul>

<!-- Değiştiriciler: wb-list-flush · wb-list-compact · wb-list-numbered -->

Filtre Çubuğu

Veri tabloları için arama ve filtre satırı.

<div class="wb-filter-bar">
  <div class="wb-search-bar">
    <svg class="wb-search-icon">...</svg>
    <input type="search" class="wb-search-input" placeholder="Search…">
  </div>
  <select class="wb-select">...</select>
  <button class="wb-btn wb-btn-outline wb-btn-sm">Export</button>
</div>

<!-- Filtre çipleri -->
<span class="wb-filter-chip is-active">All</span>
<span class="wb-filter-chip">Active</span>
<span class="wb-filter-chip">Pending</span>

Eylem Menüsü

Tablo satırları veya başlıkları için eylem düğmeleri ve durum pilleri araç çubuğu.

<div class="wb-action-group">
  <button class="wb-action-btn">Edit</button>
  <button class="wb-action-btn">Preview</button>
  <button class="wb-action-btn wb-action-btn-danger">Delete</button>
</div>

<!-- Durum pilleri -->
<span class="wb-status-pill wb-status-active">Active</span>
<span class="wb-status-pill wb-status-pending">Pending</span>
<span class="wb-status-pill wb-status-inactive">Inactive</span>