CSS ile yerel çalışan bu davet stüdyosu; daisyUI 5 anlamsal temasını, eşleştirilmiş içerik renklerini, radyo düğmesi gruplarını, aralık kontrollerini, tarayıcı doğrulamasını ve gerçek bir inceleme iletişim penceresi adımını gösterir.
Tailwind CSS 4.3.3 ile derlenen resmî daisyUI 5.7.47 sınıfları; uygulama davranışı yalın JavaScript ile sağlanır. · Uygulama başvurusu
02
daisyUI Tasarım Sistemi Tasarım Referansı
Tailwind CSS 4.3.3 ile oluşturulmuş daisyUI 5.7.47. Listelenen renk ve geometri değerleri, pakete eklenen Emerald temasına aittir; Lo-fi ve Night temaları bilerek farklı değerler tanımlar. Sayfa tipografisi ve boşlukları, Tailwind ile uyumlu ölçüler kullanan özgün tercihlerdir.
daisyUI Tasarım Sistemi: Tailwind CSS Üzerinde Anlamsal Bileşen Sınıfları
Tailwind CSS Üzerinde Anlamsal Bileşen Sınıfları
daisyUI, Tailwind eklentisi aracılığıyla bileşen sınıfları sağlar. Beşinci sürümde kurulum CSS içinde yer alır: tailwindcss’i içe aktarın, ardından daisyui eklentisini ve etkin temaları tanımlayın. Örnek; bu bileşenlerin görünümünü özel seçicilerle yeniden oluşturmak yerine btn, card, fieldset, range, checkbox, join ve modal sınıflarını kullanır.
Eklenti, uygulamanın durum yönetimini sağlamaz. Yerel girdiler, tarayıcı doğrulaması, iletişim kutusu yöntemleri ve küçük bir JavaScript modülü bu davet stüdyosunu etkileşimli hâle getirir. Kütüphane seçerken bu ayrım önemlidir: bileşen katmanı CSS olduğu için kütüphane çeşitli çerçevelerle kullanılabilir; ancak tek başına bir sınıf adı sunucu işlemini gerçekleştirmez.
daisyUI Tasarım Sistemi: Renkli Her Yüzeyi İçerik Rolüyle Eşleştirin
Renkli Her Yüzeyi İçerik Rolüyle Eşleştirin
Davet kartında bg-primary ve text-primary-content birlikte kullanılır. Rol şeridinde de bu eşleşme secondary, accent ve neutral için tekrarlanır. Bunlar, her bileşene kopyalanması gereken tek ve sabit bir palet değil, birbiriyle uyumlu anlamsal rollerdir. Etkin başka bir tema seçildiğinde kart işaretlemesi değişmeden alttaki değişkenler güncellenir.
Emerald temasında primary açık yeşil, primary-content ise koyu yeşildir. Her primary arka planında otomatik olarak beyaz metin kullanmak, temanın amaçlanan içerik rolünü göz ardı eder. Özellik tablosunda, kurulu Emerald temasındaki gerçek OKLCH değerleri korunmuştur; bunlar tahminî onaltılık marka renklerine dönüştürülmemiştir.
daisyUI Tasarım Sistemi: Sunmayı Planladığınız Temaları Derleyin
Sunmayı Planladığınız Temaları Derleyin
CSS eklentisinin yapılandırması, varsayılan olarak Emerald’ı; ayrıca Lo-fi ve Night temalarını etkinleştirir. Bir seçim denetimi, belge öğesindeki data-theme değerini değiştirir. Menüde yalnızca derlenen temalar sunulur; hiç derlenmemiş bir adın seçilmesi, karşılık gelen CSS temasını kendiliğinden oluşturmaz.
Temalar; yarıçap, alan boyutu, kenarlık ve efekt değişkenlerini de içerir. Bu nedenle Emerald’dan Lo-fi’ye geçiş, renk örneğinden fazlasını değiştirir. Bir temayı gömülü bir bölgeyle sınırlamak için data-theme, html yerine o bölgeye eklenebilir. Bu bağımsız örnekte tema bilerek belgenin tamamına uygulanır.
daisyUI Tasarım Sistemi: Seçici, Alan ve Kutu Köşe Yarıçapları Birbirinden Ayrıdır
Seçici, Alan ve Kutu Köşe Yarıçapları Birbirinden Ayrıdır
Emerald; radius-selector için bir rem, radius-field için yarım rem ve radius-box için bir rem tanımlar. size-selector ve size-field ise bileşen hesaplamalarında kullanılan çeyrek rem temel birimleridir. Bu değerler, sayfa bölümleri arasındaki boşluklarla birbirinin yerine kullanılamaz. Özellikler, bileşen geometrisini özgün çalışma alanı düzeninden ayrı olarak gösterir.
Çevredeki sayfada sistem sans yazı tipi yığını, büyük bir editoryal başlık ve iki sütunlu bir düzen kullanılır. daisyUI bu başlık hiyerarşisini gerektirmez. Orijinal 700px kırılma noktasında sayfa, düzenleyiciyi davetin üzerine alacak şekilde dikey olarak düzenlenir; ekran görüntüsüne sığması için ayarları gizlemek yerine tüm girişleri ve eylemleri korur.
daisyUI tasarım sistemi A Gerçek Radyo Girdileriyle Gruplara Katılma
Birleştirme Bileşeni Gerçek Radyo Girdilerini Gruplar
Biçim seçenekleri, ortak bir name değerini ve join-item ile btn sınıflarını kullanan radyo girdileridir. Studio session veya Online circle seçildiğinde yerel işaretli durumu ve önizleme metni değişir. Kalıcı bir seçim durumu olmayan biçimlendirilmiş düğmelerden oluşan bir sıra, bu karşılıklı dışlayıcı seçimi aynı açıklıkta yansıtmaz.
Seats, dörtten yirmi dörde kadar ikişer artan değerler kullanan yerel bir range girdisidir. Bir output öğesi geçerli sayıyı yansıtır; uç nokta etiketleri ise hedeflenen buluşma büyüklüğünü açıklar. Malzeme denetimi gerçek bir onay kutusudur. Durumu yalnızca onay kutusunun rengini değiştirmekle kalmaz, davet altbilgisini de değiştirir.
daisyUI tasarım sistemi CSS Doğrulama Tarayıcı Kısıtlarını Yansıtır
CSS Doğrulama Tarayıcı Kısıtlarını Yansıtır
Başlık girdisi zorunludur ve minimum ile maksimum uzunluk kısıtlarına sahiptir. validator sınıfı ve validator-hint geçersiz durumu gösterir; yerel kısıtın uygulanmasından yine tarayıcı sorumludur. Form, inceleme düğmesindeki genel bir tıklama işleyicisiyle geçerlilik denetimini atlamaz.
Olağan doğrulama başarıyla tamamlandıktan sonra submit işleyicisi başlığı kırpar ve anlamlı uzunluğunu denetler. Böylece kırpılmamış bir minlength koşulunu karşılayabilen boşluk dizeleri de yakalanır. Düzeltilmiş bir başlığın gönderilebilmesi için bir sonraki input olayında özel geçerlilik iletisi temizlenir. Kullanıcı içeriği HTML olarak eklenmek yerine textContent aracılığıyla görüntülenir.
daisyUI tasarım sistemi Gerçek Bir İletişim Kutusunda İnceleme Anlık Görüntüsü
Gerçek Bir İletişim Kutusunda İnceleme Anlık Görüntüsü
Davetin geçerli başlığı, biçimi, koltuk sayısı ve malzeme bilgileri bir anlık görüntüye kopyalanır, ardından dialog.showModal çağrılır. Modal sınıfı daisyUI biçimlendirmesini sağlarken yerel iletişim kutusu davranışını tarayıcı sağlar. Başlık, iletişim kutusunu aria-labelledby aracılığıyla etiketler; Escape tuşu da incelemeyi kaydetmeden kapatabilir.
Düzenlemeye devam et, iletişim kutusunu kapatır ve formu değiştirmez. Yerel taslağı kaydet, iletişim kutusunu kapatır ve tam anlık görüntüyü bir durum bölgesinde bildirir. İleti, hiçbir davetin gönderilmediğini belirtir. Bu, bilerek e-posta gönderilmiş gibi bir başarı simülasyonu yapmaz: örnekte alıcı listesi veya gönderim hizmeti yoktur.
daisyUI tasarım sistemi Sıfırlama ve Düzenleme Gözlemlenebilir Etkiler Yaratır
Sıfırlama ve Düzenleme Gözlemlenebilir Etkiler Yaratır
Bir alanın değiştirilmesi kartı anında günceller ve daha önce kaydedildiğine ilişkin bildirimi gizler. Böylece eski bir başarı iletisinin, kaydedilmemiş daha yeni bir daveti açıklıyor gibi görünmesi önlenir. Sıfırlama, tarayıcının varsayılan form değerlerini geri yüklemesini bekler ve ardından önizlemeyi bu gerçek değerlerden yeniden oluşturur. Bağımsız olarak seçilmiş temayı değiştirmez.
Üç şekilden oluşan dekoratif görsel, dolgu rengini primary-content değerinden alır; bu nedenle tipografiyle birlikte tema değişikliklerine de tepki verir. Koltuk sayısı veya biçim hakkında bilgi katmadığından aria-hidden olarak işaretlenmiştir. Anlamlı içeriği, görünür önizleme başlığı ve altbilgisi taşır.
Geçersiz girdi incelemeyi engeller ve başlık alanını belirtir.
Escape, kayıtlı bir sonuç oluşturmadan incelemeyi kapatır.
Kaydetme işleminden sonra düzenleme yapmak, geçerli temayı korurken eski sonucu temizler.
daisyUI tasarım sistemi Açık Kaynak Keşfiyle Küçük Bir CSS Derlemesi
Açık Kaynak Keşfiyle Küçük Bir CSS Derlemesi
Sağlanan kurulumda Tailwind CLI, yerel bir input.css dosyası ve yukarıda gösterilen üç kaynak dosyası kullanılır. source(none), geniş kapsamlı otomatik taramayı devre dışı bırakır; açık source yönergesi ise bileşeni ve yardımcı sınıfları içeren HTML konumunu gösterir. Böylece oluşturulan CSS, örneğin gerçek işaretlemesine bağlı olur.
Derleme çıktısı özgün düzen stil sayfasıyla birleştirilir; etkileşimi düz JavaScript yönetir. Bağımsız önizleme, sonucu satır içine alır ve uzaktaki kaynaklara bağımlı değildir. Vite, Astro veya React projesi bunun yerine olağan Tailwind entegrasyonunu kullanabilir; ancak etkin tema listesini korumalı ve sınıf içeren kaynak dosyalarının kapsama alındığından emin olmalıdır.
Birincil arka planlarda her zaman birincil içerik metni kullanılır.
Aralık denetimi; min, max ve step değerlerine sahip yerel bir girdi olarak kalır.
İletişim kutusu, yalnızca görsel bir open sınıfıyla değil, showModal aracılığıyla açılır.
Yerel taslak davranışı
Canlı önizleme, sabit inceleme anlık görüntüsü, tema seçimi ve yerel doğrulama.
JavaScript
const q=s=>document.querySelector(s),form=q('#invitation'),dialog=q('#review');let snapshot;
function update(){const title=q('#title').value.trim(),seats=q('#seats').value,format=q('[name="format"]:checked').value,materials=q('#materials').checked;q('#preview-title').textContent=title||'Your workshop title';q('#seat-count').value=seats;q('#preview-seats').textContent=`${seats} seats`;q('#preview-format').textContent=format;q('#preview-materials').textContent=materials?'Materials included':'Bring your own materials';q('#result').hidden=true;}
q('#theme').addEventListener('change',e=>document.documentElement.dataset.theme=e.target.value);form.addEventListener('input',update);form.addEventListener('reset',()=>setTimeout(update,0));form.addEventListener('submit',e=>{e.preventDefault();snapshot={title:q('#title').value.trim(),seats:q('#seats').value,format:q('[name="format"]:checked').value,materials:q('#materials').checked};if(snapshot.title.length<5){q('#title').setCustomValidity('Enter at least five non-space characters.');q('#title').reportValidity();return;}q('#review-copy').textContent=`${snapshot.title} · ${snapshot.format} · ${snapshot.seats} seats · ${snapshot.materials?'Materials included':'Bring your own materials'}`;dialog.showModal();});q('#title').addEventListener('input',()=>q('#title').setCustomValidity(''));q('#back').onclick=()=>dialog.close();q('#approve').onclick=()=>{dialog.close();q('#result').hidden=false;q('#result').textContent=`Local draft saved: ${snapshot.title}, ${snapshot.seats} seats. No invitations were sent.`;};update();
daisyUI 5.7.47 ve Tailwind CSS 4.3.3 ile doğrulanmıştır. Kart görseli ve sayfa düzeni özgündür; bileşen CSS ve Emerald tema değerleri yerel olarak sunulur.
css
/* npm install -D [email protected] @tailwindcss/[email protected][email protected] */
/* Save the HTML example as body.html in the same directory as input.css. */
/* input.css */
@import "tailwindcss" source(none);
@source "./body.html";
@plugin "daisyui" {
themes: emerald --default, lofi, night;
}
/* Build: npx @tailwindcss/cli -i ./input.css -o ./output.css --minify */
/* In index.html, link output.css then style.css; include body.html markup. */
/* Load the supplied app.js with <script src="app.js" defer></script>. */
/* Set <html lang="en" data-theme="emerald"> and a viewport meta tag. */
Projeniz İçin Bir İstem
Ajan İstemi
Davet stüdyosunu yeniden oluşturmak için daisyUI 5.7.47 sürümünü sağlanan Tailwind 4 derlemesiyle ve Emerald, Lo-fi ile Night temalarıyla kullanın. Anlamsal arayüz yüzeyi renklerini karşılık gelen içerik rolleriyle eşleştirin. Birbirine bağlı yerel radyo girdilerini, çift adımlı koltuk aralığını, malzeme onay kutusunu ve başlık doğrulamasını koruyun. İnceleme, geçerli daveti yerel bir iletişim kutusunda yakalar; Yerel taslağı kaydet bu anlık görüntüyü onaylar, sonraki düzenlemeler ise iletiyi temizler. Formu seçili temadan bağımsız olarak sıfırlayın ve davetlerin gönderildiğini iddia etmeyin.
05
daisyUI tasarım sistemi Kaynakları ve Kapsamı
daisyUI 5.7.47 ve Tailwind CSS 4.3.3. Emerald değerleri temaya özeldir. Yerel taslak verileri kalıcı olarak saklamaz ve davet göndermez.
