Lily'yi adım adım öğrenin
Hoş geldiniz! Her öğretici sıfırdan başlar ve aynı küçük şeyi — erişilebilir, biçimlendirilmiş bir form — yaklaşık 10 dakikada oluşturur; böylece çerçeveleri aynı koşullarda karşılaştırabilirsiniz. Sonra tema oluşturma ve kullanıcı tercihleriyle daha derine inin.
Başlamadan önce
Şaşırtıcı derecede az şey gerekir:
- HTML öğreticisi için — yalnızca bir tarayıcı ve bir metin düzenleyici. Tüm araç seti bu kadar.
- Svelte, React, Vue, Angular veya Nunjucks için — git, Node 26 ve pnpm 10 veya üstü.
- Blazor için — git ve .NET SDK 8 veya üstü.
Başsız bileşenlere yeni misiniz? Doğru yerdesiniz — her öğretici ilerledikçe neler olduğunu açıklar ve her adım kopyalanacak kodu tam olarak gösterir.
Sıfırdan yayına dört adım
- İlk bileşeniniz (~5 dakika) — aşağıdan çerçevenizi seçin, kodu alın ve bir Button oluşturun.
- Birleştirin ve biçimlendirin (~5 dakika) — etiketli bir form oluşturun ve kebab-case sınıf kancalarına göre biçimlendirin (her çerçeve öğreticisinin bir parçası).
- Tema uygulayın (~15 dakika) — elle yazdığınız CSS'i hazır 57 temadan biriyle değiştirin, sonra kullanıcıların çalışma zamanında geçiş yapmasına izin verin: tema öğreticisi.
- Tercihlere saygı gösterin (~15 dakika) — tercih yardımcılarıyla dil ve metin boyutu seçimi ekleyin: yardımcılar öğreticisi.
Çerçevenizi seçin
HTML
Sınıf kancalarıyla anlamsal HTML'yi kopyalayın ve başlayın — gereken tek şey bir tarayıcı ve bir düzenleyici.
Svelte
Svelte 5 rune'ları, snippet'ler ve bind:value çift yönlü bağlama.
React
value + onChange ve kalan prop'ların yayılımıyla işlev bileşenleri.
Vue
v-model desteğiyle Vue 3 tek dosyalı bileşenler.
Angular
Sinyal girdileri ve [(value)].
Blazor
Parametreler, ChildContentve bUnit testleriyle Razor bileşenleri.
Nunjucks
Eleventy ve herhangi bir Node şablon hattı için sunucuda oluşturulan makrolar.
Kararsız mısınız? HTML ile başlayın — diğer tüm çerçevelerin paylaştığı sınıf kancası sözleşmesini öğretir ve doğrudan bir dosyadan çalışır.
Daha derine inin
Tema oluşturma
Hazır 57 temadan birini bağlayın — NHS, GOV.UK, USWDS, açık, koyu ve daha fazlası — kendi CSS'inizle geçersiz kılın ve theme-picker yardımcısıyla çalışma zamanında tema değiştirmeyi ekleyin.
Tercih yardımcıları
Kullanıcılara tema, dil, metin boyutu, hareket, arama, sayfa bağlantıları, paylaşım ve tarih/saat girişi üzerinde denetim verin: theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker ve date-time-picker — kalıcılık, SSR güvenliği ve otomatik RTL algılamalı başsız denetimler.
Öğreticilerden sonra
- Bileşen kataloğuna göz atın — her bileşen prop'larını, ARIA sözleşmesini ve klavye davranışını belgeler.
- Bir örnek uygulamayı klonlayarak 571 bileşenin tümünü biçimlendirilmiş ve birlikte çalışır halde görün — CSS, az önce kullandığınız sınıf kancalarını hedefler; dilediğiniz kısmı projenize kopyalayıp istediğiniz gibi ayarlayın.
- Sorunuz mu var? Yardım sayfasında cevaplar, bir SSS ve dost canlısı bir insana ulaşma yolları var. Ve bir öğretici daha açık olabilirse, bize söyleyin — memnuniyetle iyileştiririz.