Doğrulanmış anlamsal tema takma adları, kalıcı bir paketleme kontrol listesi ve erişilebilir, yerel bir malzeme notu iş akışı içeren yerel bir Flowbite 4 akordeon ve çekmece düzeni.
Flowbite 4.0.2 Akordeon ve Çekmece sınıfları, varsayılan tema ve Tailwind CSS 4.3.3. · Uygulama başvurusu
02
Flowbite Tasarım Sistemi Tasarım Referansı
Flowbite 4.0.2 varsayılan tema, Tailwind CSS 4.3.3 ile birlikte kullanılır. Aşağıdaki adlandırılmış takma adlar, gerçek Flowbite tema değişkenleridir; başvurdukları renk skalaları Tailwind’den gelir. Paketleme çizimi ve uygulama aralıkları özgün tercihlerdir.
Flowbite Tasarım Sistemi Dört, Adlandırılmış Bir Varsayılan Tema Ekler
Flowbite Dört, Adlandırılmış Bir Varsayılan Tema Ekler
Bu örnek, sürümü belirtilmemiş eski mavi ve gri kod parçacıklarını bir araya getirmek yerine Flowbite 4.0.2’yi kullanır. Varsayılan teması color-body, color-heading, color-brand ve color-neutral-primary gibi anlamsal takma adlar tanımlar. Sayfa, Flowbite Tailwind eklentisini uygulamadan önce bu temayı içe aktarır ve ardından text-heading ile bg-brand gibi karşılık gelen sınıfları kullanır.
Takma adlar Tailwind’in renk skalalarına başvurur. Örneğin normal marka eylemi blue-700’e, daha güçlü üzerine gelme durumu ise blue-800’e başvurur. Belirtim, okuyucunun anlamsal rol ile temel renk değerini ayırt edebilmesi için bu referansları korur. Paketleme çizimi, resmî bir Flowbite illüstrasyonuna dönüşmeden aynı marka rollerini yeniden kullanır.
Flowbite Tasarım Sistemi Tema Geometrisi ile Tailwind Yerleşimi Birlikte Çalışır
Tema Geometrisi ile Tailwind Yerleşimi Birlikte Çalışır
Varsayılan temanın radius-base değeri on iki pikseldir; ana kapsayıcılarda, çekmece kontrollerinde ve sonuç bildiriminde rounded-base tarafından kullanılır. Tema ayrıca iki, dört, altı, sekiz ve on altı piksellik ayrı köşe yarıçapları tanımlar. Bu nedenle kopyalanan bir bileşen yeni anlamsal sınıf adlarını kullanıyorsa temanın içe aktarılması önemlidir.
Sağlanan yazı tipi yığınında Inter ilk sıradadır; ancak kendi kendine yeten bu önizleme uzaktaki bir yazı tipini indirmez. Bunun yerine kullanılabilir sistem yedeğini kullanır. Sayfa aralıkları Tailwind yardımcı sınıflarını izler: p-6 bir buçuk rem, gap-8 iki rem, masaüstündeki p-10 ise iki buçuk rem değerindedir. Bu yerleşim yardımcı sınıfları, uydurulmuş ayrı bir Flowbite aralık ölçeği olarak sunulmaz.
Flowbite Tasarım Sistemi Tek Bir Akordeon Örneği Üç Kategoriyi Yönetir
Tek Bir Akordeon Örneği Üç Kategoriyi Yönetir
JavaScript, bir öğe dizisiyle Accordion oluşturur. Her öğenin sabit bir kimliği, tetikleyici öğesi ve hedef paneli vardır; başlangıçta Paper kategorisi açıktır. alwaysOpen değeri false olduğu için Tools açıldığında Paper kapanır. Özel activeClasses ve inactiveClasses, varsayılan temanın anlamsal ön plan ve yüzey adlarını kullanır.
Sınıf panelin görünürlüğünü denetler ve tetikleyicisindeki aria-expanded değerini günceller. İşaretleme, aria-controls özelliğini ve bununla eşleşen panel kimliklerini sağlar. Kontrol listesi girdileri, panel daraltıldığında da belgede kalır; böylece kategoriler arasında geçiş yapılırken işaretli durumları korunur. Bir bölümü daraltmak görünürlükle ilgili bir eylemdir, kullanıcının paketleme çalışmasını sıfırlamaz.
Flowbite Tasarım Sistemi İlerleme Gerçek Onay Kutularından Hesaplanır
İlerleme Gerçek Onay Kutularından Hesaplanır
Atölye malzemelerini temsil eden altı gerçek onay kutusu vardır. Uygulama; paketlenen öğe sayısını, sıradaki öğeyi ve kalan öğe metnini mevcut işaretli değerlerden hesaplar. İlerleme çubuğunun genişliği ile aria-valuenow değeri aynı sayıya göre güncellenir; kontrol listesinden bağımsız bir sayaç kullanılarak değerlerin uyumsuzlaşmasına izin verilmez.
Çizim kâğıtları ve aydınger kâğıdı, hazırlıkları farklı olduğu için ayrı seçeneklerdir. Kesim matı ortak bir çalışma istasyonunu ifade eder; düşük yapışkanlı bantta ise duvar yüzeyine ilişkin bir uyarı bulunur. Bu somut ayrıntılar genişletilen kategoriyi kullanışlı kılar; akordeon yalnızca birbirini yineleyen genel paragrafları gizlemez.
Paper bölümünü açın ve Drawing sheets seçeneğini paketlendi olarak işaretleyin.
Tools bölümünü açın, Pencils and markers seçeneğini paketlendi olarak işaretleyin ve ardından Paper bölümüne dönün.
Her iki seçeneğin de işaretli kaldığını ve özette altı öğeden ikisinin gösterildiğini doğrulayın.
Flowbite Tasarım Sistemi Bir Çekmece Örneği Görünürlüğü ve Arka Plan Katmanını Yönetir
Bir Çekmece Örneği Görünürlüğü ve Arka Plan Katmanını Yönetir
Malzeme paneli, yerleşimi right, backdrop değeri true ve bodyScrolling değeri false olacak şekilde new Drawer kullanılarak başlatılır. Paneli açmak show, kapatmak ise hide metodunu çağırır. Yerel Flowbite uygulaması konumlandırma ve geçiş sınıflarını, arka plan katmanını ve görünürlük özniteliklerini uygular. Bu sayfa, aynı panel için ikinci bir veri özniteliği başlatıcısını karıştırmak yerine özellikle JavaScript API kullanır.
Çekmece genişliği yirmi dört rem’dir ve max-w-full sayesinde dar bir görünüm alanında da kullanılabilir kalır. İçeriği panel içinde dikey olarak kaydırılabilir. Sayfanın boyutu içeriğine göre belirlenir; çekmecedeki h-screen, gömülü sayfada asgari yükseklik döngüsü yaratmayan, bilerek sabitlenmiş bir katmandır.
Flowbite Tasarım Sistemi Çekmece Yaşam Döngüsüne Odak Yönetimi Ekleyin
Çekmece Yaşam Döngüsüne Odak Yönetimi Ekleyin
onShow geri çağrısı, arka plandaki main öğesini inert yapar ve odağı Prepared by girdisine taşır. onHide, inert değerini kaldırır ve odağı Prepare materials note düğmesine geri verir. Küçük bir keydown işleyicisi, odağı panelin ilk ve son kontrolleri arasında Tab ve Shift+Tab ile döngüye sokar. Bu eklemeler, yalnızca bir stil sınıfının sağladığı varsayımına dayanmak yerine eksiksiz kaynak kodda görünür durumdadır.
Flowbite, çekmecesi için Escape tuşunu yönetir. Örneğin geri çağrıları, hangi kapatma yolu kullanılırsa kullanılsın arka planın yeniden etkileşimli olmasını sağlar. Panel aria-labelledby ile etiketlenmiştir; kapatma kontrolünün açık bir erişilebilir adı vardır. Gerçek bir uygulama, kitaplık adını erişilebilirliği bütünüyle garanti eden bir özellik gibi görmemeli; bu davranışı kendi portalları ve yönlendirmesiyle birlikte test etmelidir.
Flowbite Tasarım Sistemi Sahibi Doğrulayın ve Yalnızca Yerel Metni Kaydedin
Sahibini Doğrulayın ve Yalnızca Yerel Metni Kaydedin
Prepared by alanı zorunludur ve minimum ile maksimum uzunluk sınırlamalarına tabidir. Gönderme işleyicisi ayrıca adı kırpar ve yalnızca boşluklardan oluşan girdileri reddeder. Session note isteğe bağlıdır ve 240 karakterle sınırlıdır. Kalan öğeler özeti, çekmece her açıldığında yenilenir; böylece önceki bir paketleme durumunu değil, mevcut kontrol listesini gösterir.
Kaydetme işlemi çekmeceyi kapatır ve sahibin, paketlenen öğe sayısının ve isteğe bağlı metnin bulunduğu yerel bir notu duyurur. E-posta gönderilmez ve paylaşılan bir belge oluşturulmaz. Kullanıcı dizeleri textContent özelliğine atanır. Paketleme kontrol listesi düzenlendiğinde eski sonuç bildirimi temizlenir; aksi hâlde önceki sayı yanıltıcı olabilir.
Flowbite Tasarım Sistemi JavaScript Kitaplığının Oluşturduğu Sınıfları Dahil Edin
JavaScript Kitaplığının Oluşturduğu Sınıfları Dahil Edin
Tailwind girdisi varsayılan Flowbite temasını içe aktarır ve flowbite/plugin eklentisini kaydeder. Açık kaynak yönergeleri HTML dosyasını, uygulama modülünü ve Flowbite ESM kitaplığını kapsar. Son kaynak özellikle önemlidir: kitaplığın çalışma zamanında eklediği sınıflar, başlangıçtaki HTML dosyasında doğrudan yazılmamış olsalar bile oluşturulan stil sayfasında bulunmalıdır.
Paket, flowbite içinden Accordion ve Drawer bileşenlerini içe aktarır. Verilen örnek, işaretleme hazır olduktan sonra her örneği bir kez başlatır. Görünümleri bağlayıp kaldıran çerçeve uygulamalarında, yinelenen dinleyicileri önlemek için yaşam döngüsü kurulumuna örnek temizliği de eşlik etmelidir. Yerel sayfa bir kez bağlanır ve istemci tarafında rota geçişi yapmaz.
Flowbite Tasarım Sistemi: Görünür Uygulama Sınırlarıyla Bir Atölye Hazırlık Rehberi
Uygulama Sınırları Belirgin Bir Paketleme Yardımcısı
Bu saha rehberi; içerik ağırlıklı bir akordeon, kalıcı onay kutusu durumu ve bir yer paylaşımı iş akışı sunar. Uydurma stok verisi veya uzaktan tedarik sonucu içermez. Altı malzemenin tümü örnek atölye hazırlık görevidir; kaydedilen not sayfa açık kaldığı sürece bellekte tutulur.
Varsayılan anlamsal tema, bileşen sınıfları ve JavaScript davranışı Flowbite kaynaklıdır; atölye içeriği, özgün çizim ve odak iyileştirmeleri ise uygulama kodudur. Bu ayrım, okuyucuların kullanışlı bir düzeni kopyalarken kitaplığın gerçekte hangi sorumlulukları üstlendiğini anlamasını sağlar.
Panel görünürlüğü için Flowbite durum bilgili örneğini kullanın.
Kontrol listesi verilerini ve türetilmiş ilerlemeyi uygulama mantığında tutun.
Gerçek satın alma veya paylaşılan kalıcılık işlemlerini yalnızca açık bir arka uç entegrasyonu üzerinden gerçekleştirin.
Düğmeler, aria-controls aracılığıyla panel kimliklerine bağlanır.
Çekmece, başlığıyla etiketlenir.
İlerleme çubuğu, gören kullanıcıların gördüğü sayının aynısını sunar.
Yerel Flowbite örnekleri ve yerel durum
Accordion/Drawer başlatma işlemleri ile uygulamaya özgü kontrol listesi ve odak yönetimi.
JavaScript
import {Accordion,Drawer} from 'flowbite';
const q=s=>document.querySelector(s),drawerEl=q('#materials-drawer'),page=q('#page');
const accordion=new Accordion(q('#packing-accordion'),['paper','tools','space'].map((id,i)=>({id,triggerEl:q(`#${id}-trigger`),targetEl:q(`#${id}-panel`),active:i===0})),{alwaysOpen:false,activeClasses:'bg-brand-softer text-fg-brand',inactiveClasses:'bg-neutral-primary text-heading'});
const drawer=new Drawer(drawerEl,{placement:'right',backdrop:true,bodyScrolling:false,onShow(){page.inert=true;q('#owner').focus();},onHide(){page.inert=false;q('#open-note').focus();}});
const boxes=[...document.querySelectorAll('[data-item]')];
function refresh(){let packed=boxes.filter(x=>x.checked),left=boxes.filter(x=>!x.checked);q('#count').value=`${packed.length} of 6`;q('#bar').style.width=`${packed.length/6*100}%`;q('[role="progressbar"]').setAttribute('aria-valuenow',packed.length);q('#next-item').textContent=left.length?`Next: ${left[0].dataset.item}`:'Everything on the list is packed.';q('#remaining').textContent=left.length?`Still needed: ${left.map(x=>x.dataset.item).join(', ')}.`:'All six materials are packed.';q('#result').hidden=true;}
boxes.forEach(x=>x.addEventListener('change',refresh));q('#clear').onclick=()=>{boxes.forEach(x=>x.checked=false);refresh();};q('#open-note').onclick=()=>{refresh();drawer.show();};q('#close-note').onclick=()=>drawer.hide();drawerEl.addEventListener('keydown',e=>{if(e.key==='Tab'){let els=[...drawerEl.querySelectorAll('button,input,textarea')],first=els[0],last=els.at(-1);if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();}else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();}}});q('#note-form').onsubmit=e=>{e.preventDefault();const owner=q('#owner');if(owner.value.trim().length<2){owner.setCustomValidity('Enter at least two non-space characters.');owner.reportValidity();return;}drawer.hide();q('#result').hidden=false;q('#result').textContent=`Local note prepared by ${owner.value.trim()}: ${boxes.filter(x=>x.checked).length} of 6 items packed. ${q('#note').value.trim()||'No extra note.'}`;};q('#owner').oninput=()=>q('#owner').setCustomValidity('');refresh();
Sağlanan etkileşimi main.js olarak kaydedin ve kurulumda gösterildiği gibi bundle.js dosyasına derleyin.
Görünüm alanı ve yerel varlık yüklemesi dahildir.
04
Flowbite Tasarım Sistemi Aracısı Kurulumu
Uygulamaya Başlangıç Noktası
Tailwind CSS 4.3.3 ile birlikte Flowbite 4.0.2 doğrulandı. node_modules kaynak yolunu input.css dosyasının gerçek konumuna göre uyarlayın. Uzak yazı tipleri gerekmez.
css
/* npm install [email protected] */
/* npm install -D [email protected] @tailwindcss/[email protected] esbuild */
/* input.css, next to body.html and main.js: */
@import "tailwindcss" source(none);
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "./body.html";
@source "./main.js";
@source "./node_modules/flowbite/lib/esm";
/* npx @tailwindcss/cli -i input.css -o output.css --minify */
/* npx esbuild main.js --bundle --format=iife --outfile=bundle.js */
/* index.html: link output.css then style.css; include the supplied markup. */
/* Load bundle.js with defer, or after the markup. */
Projeniz İçin Bir İstem
Ajan İstemi
Tailwind kaynak keşfi ile yerel Accordion ve Drawer başlatmalarını içeren, Flowbite 4.0.2 atölye paketleme rehberinin tamamını kullanın. Gruplanmış malzemeleri ve kontrol listesi durumunu rehbere bağlı tutun; yerel paketleme notu kaydetmeden önce sorumlu kişi bilgilerini doğrulayın. Çekmecenin klavye odağını, arka planı etkileşime kapatma davranışını ve kapatılma işlevini koruyun. Özgün CSS çizimini kitaplığın anlamsal temasından ayrı tutun. Bu yerel paketleme iş akışına hizmet talebi veya harici gönderim eklemeyin.
05
Flowbite Tasarım Sistemi Kaynakları ve Kapsamı
Varsayılan temasıyla Flowbite 4.0.2. Paketleme içeriği, dekoratif çizimler ve odak iyileştirmeleri özgündür. Malzeme notları yerel kalır.
