Hareket · JavaScript API

Hareket, yumuşakça.

Animasyonlar dikkat çekmek için değil, akışı anlatmak için vardır. Hepsi “azaltılmış hareket” ayarına saygı duyar.

01Hareket ilkeleri#

Değişken	Eğri	Ne zaman?
`--fk-ease`	cubic-bezier(.16, 1, .3, 1)	Çoğu geçiş: hızlı başlar, yumuşak durur
`--fk-ease-io`	cubic-bezier(.76, 0, .24, 1)	Perde, menü gibi büyük yüzeyler
`--fk-spring`	cubic-bezier(.34, 1.56, .64, 1)	Hafif yaylanma: rozet, onay işareti, gösterge

Küçük öğeler 300–500 ms, büyük yüzeyler 800–1200 ms.
Aynı anda tek bir şey hareket etsin; gerekiyorsa 60 ms arayla sırala.
Kullanıcı prefers-reduced-motion açtıysa hareket kapanır, içerik hemen görünür.

02Belirme (reveal)#

fk-reveal alan öğe ekrana girince bulanıktan netleşerek yukarı kayar. --d ile gecikme verilir.

01

02

03

HTML

<div class="fk-grid fk-g-3" style="width:100%">
  <div class="fk-card fk-reveal" style="--d:0s"><h3 class="fk-card-title">01</h3></div>
  <div class="fk-card fk-reveal" style="--d:.1s"><h3 class="fk-card-title">02</h3></div>
  <div class="fk-card fk-reveal" style="--d:.2s"><h3 class="fk-card-title">03</h3></div>
</div>

03Kelime kelime başlık#

Sizinle yolculuğa çıkalım.

HTML

<h2 class="fk-h2" data-fk-split>Sizinle yolculuğa <em>çıkalım.</em></h2>

data-fk-split başlığı kelimelere böler; ekrana girince kelimeler sırayla aşağıdan yükselir. Ekran okuyucular metni normal okur.

04Sayaç#

2026

HTML

<strong class="fk-h1" data-fk-count="2026">2026</strong>

05Mıknatıs ve kart ışığı#

Işık

Fareyi üzerinde gezdir.

HTML

<div class="demo-row">
  <button type="button" class="fk-btn fk-btn-primary" data-fk-magnetic>Bana yaklaş</button>
  <div class="fk-card" style="width:260px"><h3 class="fk-card-title">Işık</h3><p>Fareyi üzerinde gezdir.</p></div>
</div>

Mıknatıs yalnızca fare kullanan cihazlarda çalışır; dokunmatik ekranlarda kapalıdır.

06JavaScript API#

fkdev-ui.js yüklendiğinde sayfadaki tüm bileşenleri otomatik başlatır ve global bir FK nesnesi oluşturur.

Metot	Döner	Açıklama
`FK.toast(mesaj, tür?, ms?)`	kapatma fonksiyonu	Bildirim gösterir. tür: `info \| success \| warning \| danger`
`FK.confirm(ayarlar)`	`Promise<boolean>`	Onay penceresi açar; Onayla → `true`
`FK.open("#id")` / `FK.close("#id")`	dialog	Modal ya da drawer açar/kapatır
`FK.setTheme("dark" \| "light")`	—	Temayı değiştirir ve hatırlar
`FK.theme()`	`"dark" \| "light"`	Geçerli tema
`FK.copy(metin)`	`Promise`	Panoya kopyalar
`FK.sort(tablo, th)`	—	Tabloyu bir sütuna göre sıralar
`FK.init(kök?)`	—	Sonradan eklenen HTML’i başlatır (AJAX, React, Vue sonrası); aynı öğeyi iki kez bağlamaz
`FK.split(öğe)`	—	Bir başlığı elle kelimelere böler
`FK.version`	`"2.4.1"`	Kütüphane sürümü

Olaylar

Bileşenler fk: önekli olaylar yayar; hepsi yukarı doğru kabarır (bubbles), bu yüzden document üzerinde de dinleyebilirsin.

Olay	Kaynak	`event.detail`
`fk:ready`	`<html>`	`{ version }`
`fk:theme`	`<html>`	`{ theme }`
`fk:open` / `fk:close`	dialog	`{ value }` (kapanışta düğmenin `data-fk-close` değeri)
`fk:tab`	`[data-fk-tabs]`	`{ tab }`
`fk:sort`	tablo	`{ column, direction }`
`fk:complete`	`.fk-otp`	`{ value }`
`fk:tags`	`.fk-tags`	`{ values }`

JavaScriptTema değişimini dinle

document.addEventListener('fk:theme', (e) => {
  console.log('Yeni tema:', e.detail.theme);
});

JavaScriptDinamik içerik

const kart = document.createElement('div');
kart.innerHTML = '<button class="fk-btn fk-btn-primary" data-fk-toast="Merhaba!">Dene</button>';
document.body.appendChild(kart);
FK.init(kart);

07Tüm data-fk öznitelikleri#

Sınıf / öznitelik	Açıklama
`data-fk-theme-toggle`	Tema düğmesi; içinde `.fk-i-sun` / `.fk-i-moon` ikonları otomatik değişir
`data-fk-toast / data-fk-type`	Tıklayınca bildirim
`data-fk-copy="metin \| #id"`	Metni, alanın değerini ya da öğenin içeriğini kopyalar
`data-fk-msg`	Kopyalama bildirimi ya da alan hata mesajı
`data-fk-open / data-fk-close`	Modal ve drawer aç/kapat
`data-fk-tabs`	Sekme grubu
`data-fk-validate / data-fk-demo / data-fk-success / data-fk-error`	Form doğrulama
`data-fk-password`	Şifre göster/gizle
`data-fk-counter`	Karakter sayacı
`data-fk-tags`	Etiket girişi
`data-fk-sort / data-fk-type / data-value`	Sıralanabilir tablo
`data-fk-dismiss`	Kapatılınca hatırlanan öğe
`data-fk-tip`	Tooltip metni
`data-fk-split`	Kelime animasyonu
`data-fk-count`	Sayaç
`data-fk-value`	Halka göstergesi animasyonu
`data-fk-magnetic`	Mıknatıs efekti