Bölüm Başlığı

Şehir bir hikayedir.

Başlık seviye 2

Başlık seviye 3

Caps Letter — Etiket Tarzı

Bu bir gövde paragrafıdır. Inter, modern, geniş çaplı, web için optimize edilmiş bir font. Türkçe karakterler (ç, ş, ğ, ü, ö, ı, İ) çok temiz görünür.

// Bu mono. JetBrains Mono — kod ve sayısal veri için.

Soluk metin — yardımcı bilgiler için.

Variants

<button class="ui-btn ui-btn-confirm" data-icon="fa-solid fa-check"> Onayla</button>
<button class="ui-btn ui-btn-error" data-icon="fa-solid fa-trash"> Error</button>

Outline

Ghost & Sizes

AjaxButton — otomatik loading state

Tıkla → 1.5sn'lik sahte istek. Buton disable + spinner + text "Kaydediliyor..." olur, finally orijinaline döner.

const btn = document.getElementById('fakeAjaxBtn');
btn.addEventListener('click', () => {
    DuckUI.Button.withLoading(btn, async () => {
        await new Promise(r => setTimeout(r, 1500));
    });
});

5 Variant

// confirm — true/false döner
const yes = await DuckUI.confirm({
    title: 'Silmek istediğine emin misin?',
    body: 'Bu işlem geri alınamaz.',
    okText: 'Evet, sil', cancelText: 'Vazgeç',
    variant: 'error'
});
if (yes) { /* ... */ }

// alert/info/success/error — sadece OK
await DuckUI.success({ title: 'Başarılı', body: 'Kaydedildi.' });

Custom modal — kendi içeriğin

Basic

Dinamik item ekle

Aşağıdaki butona tıkla → üstteki menüye yeni bir item eklenir.

const menu = document.querySelector('.ui-topmenu');
DuckUI.Menu.add(menu, {
    text: 'Yeni',
    icon: 'fa-solid fa-star',
    dropdown: [
        { text: 'Alt 1', href: '#' },
        { text: 'Alt 2', href: '#' },
        { divider: true },
        { text: 'Çıkış', icon: 'fa-solid fa-right-from-bracket', onClick: () => DuckUI.info({title:'Demo'}) }
    ]
});

5 mask tipi

<input class="ui-input" data-ui-mask="date" />
<input class="ui-input" data-ui-mask="currency" />
<input class="ui-input" data-ui-mask="plate-tr" />
<input class="ui-input" data-ui-mask="km" />
<input class="ui-input" data-ui-mask="custom" data-ui-pattern="^TR\d{0,24}$" />

Single

Multi (chip / tag rendering)

<select data-ui-select multiple data-ui-placeholder="Etiket ekle…">
    <option value="urgent">Acil</option>
    <option value="dev" selected>Geliştirme</option>
    ...
</select>

Image upload (thumbnail grid)

File upload (satır listesi)

PDF preview (iframe — sadece son seçilen)

Sortable + Search + Pagination

Inline Edit (cell tıkla → düzenle, Enter kaydet)

data-ui-save="/api/url" ile sunucuya POST eder. Bu demo URL'siz — sadece görsel commit + flash.

Row Actions (edit / delete)

document.querySelectorAll('[data-row-action="delete"]').forEach(btn => {
    btn.addEventListener('click', async () => {
        const yes = await DuckUI.confirm({
            title: 'Silmek istediğine emin misin?',
            variant: 'error', okText: 'Sil', okVariant: 'error'
        });
        if (yes) btn.closest('tr').remove();
    });
});

Switch (boolean)

Button group — single state (radyo gibi)

Aktif: grid

Button group — multi state (checkbox gibi)

Seçili izinler: read, write

Pill variant

Hover / focus'ta göster

<button data-ui-title="Bu kayıt arşive taşınır.">Arşivle</button>
<button data-ui-title="Yardım metni." data-ui-title-pos="bottom">Bilgi</button>

Rich content (HTML body)

data-ui-title-html ile HTML içerik gösterebilirsin — başlık, kod, link.

3 örnek

<input data-ui-date placeholder="gg.aa.yyyy" />
<input data-ui-date data-ui-min="2026-01-01" data-ui-max="2026-12-31" />

input.addEventListener('ui:date-change', e => {
    console.log(e.detail.date, e.detail.iso);
});

2 panel — head'i tut sürükle

Sayfayı kaydır + paneli sürükle + bırak. F5 → konum hatırlanır. Sıfırlamak için panel head sağındaki ↻ butonuna tıkla.

<div class="ui-panel" data-ui-panel="my-tools">
    <div class="ui-panel-head">
        <span class="ui-panel-title">Tools</span>
    </div>
    <div class="ui-panel-body">
        ...
    </div>
</div>

Stat cards (KPI tile)

Toolbar

Section card (titled card)

Wizard (step indicator + content)

Split (iki kolon)

Shell (sidebar + topbar + main) — mini önizleme

Install butonu (otomatik gösterilir)

Buton sadece tarayıcı beforeinstallprompt event'i verince görünür hale gelir. iOS Safari API'yi desteklemediği için manuel "Add to Home Screen" gerekir.

Bağımsız mod (standalone) tespiti

Service worker

Strateji: /uikit/* → cache-first, /UiKit HTML → network-first. Kapatınca / offline'a geçince son ziyaret edilen sürüm açılır.

Yatay tabs

Dikey tabs

Single (radio)

Multi (checkbox)

Kart placeholder

Boyutlar

Avatar group

Kare varyant + image

PG

1. Ana sayfa
3. Projeler
5. Duck
7. UI Kit

Aktif tema: …

Tüm satırı sürükle

• Veritabanı seçimiDB
• Frontend frameworkUI
• Backend frameworkAPI
• Hosting platformuOPS

Sıra: a · b · c · d

Yalnız handle'dan sürükle (data-handle="i.ui-drag-handle")

• 📋 Görev: README yaz
• ⚙️ Görev: CI/CD kur
• 🐛 Görev: Auth bug'ı çöz

Buton tıklanabilir kalır — yalnızca handle ikonu sürüklenir.

Boş editör (placeholder)

İçerikli editör + canlı HTML çıktı

Programmatik kullanım

// Tek bir element
DuckUI.HtmlInspector.attach(document.querySelector('.my-component'));

// Selector ile çoklu
DuckUI.HtmlInspector.attachAll('.demo-block');

// Modal'ı manuel aç
DuckUI.HtmlInspector.show(document.querySelector('.ui-card'));

Örnek — bu blok'un üzerine gel, sağ üst köşede görünecek

İpucu: Layout demo'larındaki Stat / Toolbar / Section card / Wizard / Split / Shell blokları üzerinde gez — hepsinde <> butonu görünür ve HTML'i kopyalanabilir.

Mevcut sayfa: 3

Örnek 12 komut: navigasyon, hızlı eylem, kullanıcı, dokümantasyon.

Seçili: —

1. Sipariş
   2 gün önce
2. Hazırlık
   1 gün önce
3. Kargoda
   Bugün
4. Teslim
   Yarın

Aktif: day

Hover-trigger flavors

Üzerine gel, hayata gelsinler.

Entrance animations (sayfa yüklenince doğal)

Idle/state animations

Top-pick + Sparkle (Wizard's "★ ÖNERİM")

Altın halka pulse + 4 köşe sparkle pırıltısı + sticker badge — hepsi auto.