# Flowbite Tasarım Sistemi ## Flowbite Tasarım Sistemi Arayüz Önizlemesi Üç paketleme kategorisini genişletin, malzemeleri işaretleyin ve yerel bir not hazırlamak için yerel çekmeceyi kullanın. ## 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. ### Varsayılan anlamsal metin ve durum rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --color-body | var(--color-gray-600) | Normal açıklama metni. | | --color-body-subtle | var(--color-gray-500) | Destekleyici açıklamalar. | | --color-heading | var(--color-gray-900) | Başlıklar ve vurgusu yüksek etiketler. | | --color-fg-brand | var(--color-blue-700) | Marka renginde ön plan. | | --color-fg-success | var(--color-emerald-700) | Başarı ön planı. | | --color-fg-danger | var(--color-rose-700) | Hata ön planı. | | --color-fg-warning | var(--color-orange-900) | Uyarı ön planı. | | --color-fg-disabled | var(--color-gray-400) | Devre dışı ön plan. | ### Varsayılan yüzeyler ve kenarlıklar | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --color-neutral-primary | var(--color-white) | Kart ve çekmece yüzeyi. | | --color-neutral-secondary | var(--color-gray-50) | Sayfa arka planı. | | --color-neutral-tertiary | var(--color-gray-100) | İlerleme çubuğu izi. | | --color-brand | var(--color-blue-700) | Birincil eylem ve paketleme ilerlemesi. | | --color-brand-soft | var(--color-blue-100) | Odak halkası veya yumuşak marka yüzeyi. | | --color-brand-softer | var(--color-blue-50) | Açık akordeon ve çizim yüzeyi. | | --color-brand-strong | var(--color-blue-800) | Eylem üzerine gelme durumu. | | --color-default | var(--color-gray-200) | Standart bileşen kenarlığı. | | --color-success-soft | var(--color-emerald-50) | Yerel sonuç yüzeyi. | ### Varsayılan geometri ve yazı tipi değişkenleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --font-sans | 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' | Öncelikli yazı tipi Inter olan arayüz yığını; önizlemede uzaktaki bir yazı tipi yerine kullanılabilir sistem yedeği kullanılır. | | --font-mono | 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace' | Kod yazı tipi yığını. | | --radius-xxs | 2px | İki piksellik köşe yarıçapı. | | --radius-xs | 4px | Dört piksellik köşe yarıçapı. | | --radius-sm | 6px | Altı piksellik köşe yarıçapı. | | --radius | 8px | Sekiz piksellik köşe yarıçapı. | | --radius-base | 12px | rounded-base tarafından kullanılan on iki piksellik panel köşe yarıçapı. | | --radius-lg | 16px | On altı piksellik köşe yarıçapı. | | --default-border-width | 1px | Bir piksellik kenarlıklar. | | --leading-5 | 20px | Yirmi piksellik satır yüksekliği. | | --leading-6 | 24px | Yirmi dört piksellik satır yüksekliği. | ### Örnekte kullanılan Tailwind yerleşim değerleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | p-6 / md:p-10 | 1.5rem / 2.5rem | Sayfa dolgusu, Tailwind’in varsayılan çeyrek rem aralık biriminden alınır. | | gap-8 | 2rem | Paketleme kategorileri ile ilerleme özeti arasındaki boşluk. | | md breakpoint | 48rem | İki sütuna geçin. | | text-sm / text-xl / text-3xl | 0.875rem / 1.25rem / 1.875rem | Gövde, bölüm başlığı ve sayfa başlığı yardımcı sınıfları. | | w-96 / max-w-full | 24rem / 100% | Çekmece genişliği, mobil görünüm alanının sınırları içinde kalır. | ## Flowbite Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. 1. Paper bölümünü açın ve Drawing sheets seçeneğini paketlendi olarak işaretleyin. 2. 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. 3. Her iki seçeneğin de işaretli kaldığını ve özette altı öğeden ikisinin gösterildiğini doğrulayın. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## Flowbite Tasarım Sistemi Bileşen Örnekleri ### Paketleme rehberi ve çekmece işaretlemesi Anlamsal tema sınıfları, gerçek onay kutusu kontrolleri ve bağlantılı akordeon panelleri. ```

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Kod referansı - 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. ``` 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(); ``` Kod referansı - Tek bir Accordion örneği, üç kategorinin tümünü denetler. - Drawer yaşam döngüsü geri çağrıları, arka planı etkileşime kapatır ve odağı geri yükler. - Odak döngüsü, uygulamaya açıkça eklenmiştir. ### Özgün paketleme çizimi ve destekleyici CSS Yerel yardımcı programların çevresindeki uygulama düzeni ayrıntıları. ``` body{margin:0;background:var(--color-neutral-secondary);font-family:var(--font-sans)}.category-trigger{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;width:100%;text-align:left;font-size:15px;font-weight:600;border-bottom:1px solid var(--color-default)}.category-trigger b{font-size:11px;opacity:.6;margin-right:12px}.category-trigger:focus-visible{outline:3px solid var(--color-brand);outline-offset:-3px}.category-body{padding:20px;background:var(--color-neutral-primary);font-size:14px;line-height:1.7;border-bottom:1px solid var(--color-default)}.category-body p{margin-bottom:20px}.category-body label{display:flex;align-items:flex-start;gap:12px;margin:16px 0;cursor:pointer}.category-body small{display:block;font-size:12px;color:var(--color-body-subtle);margin-top:4px}.check{width:18px;height:18px;border:1px solid var(--color-default);border-radius:4px;margin-top:3px;color:var(--color-brand)}.kit-art{height:160px;background:var(--color-brand-softer);border-radius:var(--radius-base);position:relative;overflow:hidden}.kit-art i{position:absolute;width:110px;height:95px;background:#fff;border:1px solid var(--color-brand-medium);top:35px;left:20%;transform:rotate(-12deg)}.kit-art i:nth-child(2){left:35%;transform:rotate(10deg);background:var(--color-brand-soft)}.kit-art i:nth-child(3){width:8px;height:120px;left:70%;top:20px;transform:rotate(25deg);background:var(--color-brand)}.kit-art em{position:absolute;width:95px;height:22px;background:var(--color-brand-medium);bottom:20px;left:20%;transform:rotate(-20deg)}[hidden]{display:none!important}button{cursor:pointer}button:focus-visible{outline:3px solid var(--color-brand);outline-offset:3px}@media(max-width:600px){.category-trigger,.category-body{padding:16px}} ``` Kod referansı - Kâğıt, kalem ve cetvel geometrisi özgün dekoratif CSS öğeleridir. ### Eksiksiz index.html belgesi Yukarıda sağlanan stil sayfası derlemesi ve eksiksiz etkileşim kaynağıyla birlikte kullanın. ``` Flowbite specimen

FLOWBITE · FIELD GUIDE

Pack for a day of making.

A workshop packing guide with grouped instructions and a local materials note.

Choose stocks before the session. Keep one sheet untouched as a reference.

``` Kod referansı - 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. ## 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. ``` /* npm install flowbite@4.0.2 */ /* npm install -D tailwindcss@4.3.3 @tailwindcss/cli@4.3.3 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 ``` 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. ``` ## 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. - Resmî depo Dördüncü sürüm kurulumu ve bileşen API. - Varsayılan tema kaynağı Gerçek anlamsal takma adlar ve geometri. - Accordion uygulaması Örnek seçenekleri ve aria-expanded güncellemeleri. - Drawer uygulaması Görünürlük, arka plan örtüsü ve yaşam döngüsü yöntemleri. - Accordion rehberi Resmî düzen referansı. - Drawer rehberi Resmî yer paylaşımı API. - Tailwind teması Temel aralık ve tipografi yardımcı sınıfları. ## Flowbite Tasarım Sistemi İlgili Kaynaklar ### Fomantic UI Doğrulanmış derlenmiş tema değerleri, jQuery açılır menü ve puanlama modülleri, açık klavye desteği ve kalıcı yerel kısa liste içeren yerel bir Fomantic UI okuma rafı. ### Foundation XY Grid, Abide özel doğrulayıcıları, Reveal onayı, gerçek Sass ayarları ve eksiksiz yerel entegrasyon koduyla çalışan bir Foundation kanıt masası. ### Framework7 Gerçek swipeout eylemleri, açık iOS tema değerleri, klavyeyle erişilebilen bir eylem açıcı ve tamamlanmış çalışmaları sıfırlanana kadar listede tutan filtreli bir liste içeren yerel bir Framework7 eskiz defteri. - [Uygulama başvurusu](https://flowbite.com/docs/components/accordion/) - [Kaynak](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Kaynak](https://tailwindcss.com/docs/theme) - [Destekleyici belirtimi okuyun](https://flowbite.com/docs/getting-started/quickstart/) - [Destekleyici belirtimi okuyun](https://flowbite.com/docs/components/accordion/) - [Destekleyici belirtimi okuyun](https://flowbite.com/docs/forms/checkbox/) - [Destekleyici belirtimi okuyun](https://flowbite.com/docs/components/drawer/) - [Destekleyici belirtimi okuyun](https://flowbite.com/docs/forms/input-field/) - [Destekleyici belirtimi okuyun](https://flowbite.com/docs/getting-started/javascript/) - [Kod referansı](https://flowbite.com/docs/components/accordion/) - [Kod referansı](https://flowbite.com/docs/components/drawer/) - [Kod referansı](https://flowbite.com/docs/customize/colors/) - [Kod referansı](https://flowbite.com/) - [Resmî depo Dördüncü sürüm kurulumu ve bileşen API.](https://github.com/themesberg/flowbite) - [Varsayılan tema kaynağı Gerçek anlamsal takma adlar ve geometri.](https://github.com/themesberg/flowbite/blob/main/src/themes/default.css) - [Accordion uygulaması Örnek seçenekleri ve aria-expanded güncellemeleri.](https://github.com/themesberg/flowbite/blob/main/src/components/accordion/index.ts) - [Drawer uygulaması Görünürlük, arka plan örtüsü ve yaşam döngüsü yöntemleri.](https://github.com/themesberg/flowbite/blob/main/src/components/drawer/index.ts) - [Accordion rehberi Resmî düzen referansı.](https://flowbite.com/docs/components/accordion/) - [Drawer rehberi Resmî yer paylaşımı API.](https://flowbite.com/docs/components/drawer/) - [Tailwind teması Temel aralık ve tipografi yardımcı sınıfları.](https://tailwindcss.com/docs/theme)