Bits UI, yerel parçalar ve Svelte 5 durumuyla bir araya getirilebilen başsız Svelte bileşenleri sunar. Örnek; türetilmiş karma durumlu bir onay kutusunu, birbirinden bağımsız açılan akordeon bölümlerini ve portal tabanlı bir inceleme iletişim penceresini eksiksiz stil yapılandırmasıyla birleştirir.
OpenDesign Kılavuzu9 Bölüm28 Referans KaydıÖzgün Uygulama Kılavuzu
01
Bits UI Tasarım Sistemi Arayüz Önizlemesi
Tek bir denetimi işaretleyin, toplu seçimdeki karma durumu inceleyin, tamamlanmamış ilerlemeyi gözden geçirin; ardından yerel kontrol listesini tamamlayıp kaydedin.
Bits UI 2.19.5 Checkbox, Accordion ve Dialog bileşenleri; Svelte 5.57.1 ile. Tüm görsel stiller özgündür. · Uygulama başvurusu
02
Bits UI Tasarım Sistemi Tasarım Referansı
Bits UI 2.19.5 ve Svelte 5.57.1. Bits UI başsızdır: tüm --app-* renk, tipografi ve boşluk değerleri bu örnekle birlikte sunulan açıkça belirtilmiş özgün yapılandırmadır; resmî Bits UI tasarım belirteçleri değildir. Yerel veri öznitelikleri ve bileşen özellikleri ayrıca belirtilmiştir.
Bits UI Tasarım Sistemi Svelte 5 Durumu Etrafında Yerel Parçaları Birleştirin
Svelte 5 Durumuyla Yerel Parçaları Bir Araya Getirin
Kontrol listesi, her bir yanıt, açık bölüm kimlikleri ve diyalog görünürlüğü için $state kullanır. $derived ile hesaplanan tamamlanma sayısı hem görünür ilerleme göstergesini hem de toplu onay kutusunu besler. Böylece tek bir Svelte modeli doğruluk kaynağı olurken Bits UI her bileşen için yerel etkileşimleri sağlar.
Checkbox, Accordion ve Dialog kendi parçalarından oluşturulur. İnceleme diyaloğunun kontrol listesi yanıtlarını yönetmesi gerekmez; Accordion kapandığında bu yanıtları silmesi de gerekmez. Bu ayrım, çok bölümlü bir form için kullanışlı bir başlangıç noktasıdır: arayüzün hangi parçalarının görünür olduğu değişse de model korunur.
Bits UI Tasarım Sistemi Svelte 5 Bileşen ve Stil Kaynaklarını Birlikte Kullanın
Svelte 5 Bileşen ve Stil Kaynaklarını Birlikte Kullanın
Örnek, Svelte 5 rune'larını kullanır: gruplar, açık bölümler, diyalog görünürlüğü ve kaydedilmiş durum için $state; tamamlanma sayısı için $derived. Bits UI 2.19.5 doğrudan içe aktarılır. Bu özgün görsel tasarım için Tailwind eklentisi, tema sağlayıcısı veya simge kitaplığı gerekmez.
App.svelte ve style.css dosyalarının tamamı standart bir Vite Svelte projesinde çalışır. Giriş noktası, eski new App oluşturucusu yerine Svelte'den mount kullanır. Örneği aktarırken bileşenin rune sözdizimini ve Bits UI 2.19.5 bağımlılığını birlikte tutun; burada gösterilen bağlamalar ve geri çağrılar eski bir Svelte bileşen API yapısı değildir.
Bits UI Tasarım Sistemi Bireysel Onay Kutularından Gerçek Bir Karışık Durum Türetin
Gerçek Bir Karma Durumu Tek Tek Seçimlerden Türetin
Altı Boolean onay kutusu üç grupta yer alır. Toplu kontrol, yalnızca altısının da değeri true olduğunda işaretli; sayı bir ile beş arasındaysa belirsiz durumdadır. onCheckedChange geri çağrısı tüm onay kutularını günceller; böylece karışık durum, eşzamanını yitirebilecek ayrı bir bayrak olarak saklanmak yerine hesaplanan bir sonuç olur.
Bireysel kontroller, modeli güncelleyen ve kaydedilmiş geri bildirimleri geçersiz kılan küçük bir değişiklik işlevini çağırır. Yerel toplu onay kutusu, bir onay kutusu seçildikten sonra aria-checked=mixed değerini sunar. Stil sayfası data-state=checked ve data-state=indeterminate değerlerine göre yanıt verir; böylece davranış ve görünüm aynı yerel duruma bağlı kalır.
İlk odak göstergesi onay kutusunu seçin ve toplu kontroldeki çizgiyi inceleyin.
İnceleme kontrol listesini açın ve İncelemeyi tamamla seçeneğinin devre dışı olduğunu doğrulayın.
Geri dönün, tüm onay kutularını işaretleyin ve tamamlanmış yerel anlık görüntüyü kaydedin.
Bits UI Tasarım Sistemi Yanıtları Kaybetmeden Bölümlerin Birbirinden Bağımsız Olmasını Sağlayın
Yanıtları Kaybetmeden Bölümlerin Birbirinden Bağımsız Olmasını Sağlayın
Accordion.Root, type=multiple değerini ve açık grup kimliklerinden oluşan bağlı bir diziyi kullanır. Klavye akışı, açık bir bölümle başlar; Form düzeltmesi ve Sonuç geri bildirimi bölümleri birbirinden bağımsız olarak açılabilir. Bu değerler üst bileşenin durumunda tutulduğu için bir bölümü daraltmak onay kutularını temizlemez.
Her tetikleyici, tamamlanma sayısını yineleyerek içerik daraltıldığında da ilerlemenin görünür kalmasını sağlar. Yerel Header, Trigger ve Content parçaları beklenen ilişkiyi ve klavye davranışını korur. Artı işareti, tetikleyicinin data-state değerine göre döner ve genişletmeyi ayrı bir tıklama işleyicisiyle yönetmek yerine azaltılmış hareket tercihlerini gözetir.
Bits UI Tasarım Sistemi Diyaloğun Tüm Yapısını Oluşturun ve Odağı Diyaloğa Bırakın
İletişim Kutusunun Tüm Yapısını Oluşturup Odağı Ona Bırakın
İncelemede Dialog.Root, Trigger, Portal, Overlay, Content, Title, Description ve Close kullanılır. Başlık ve açıklama gerçek yerel parçalardır; böylece Bits UI bunlar arasında erişilebilir ilişkiler kurabilir. Portal, katmanı kontrol listesi panelinin normal akışının dışına yerleştirir.
İçerik, duyarlı ve sınırlı bir genişliğe ve yalnızca katmana uygulanan bir maksimum yüksekliğe sahiptir; uzun incelemelerde kaydırma kullanılabilir. Escape tuşu, kontrol listesini temizlemeden diyaloğu kapatır. Katman açıldığında tetikleyiciyi kaldırmak yerine odağın geri döneceği hedef olarak kullanılabilir durumda tutun.
Bits UI Tasarım Sistemi Uygulamanın Görsel Kurallarını Açık ve Yeniden Kullanılabilir Hale Getirin
Uygulamanın Görsel Kurallarını Açıkça Tanımlayıp Yeniden Kullanılabilir Kılın
CSS, yerel işaretli ve belirsiz durumları aynı eylem rolüne bağlar, ancak her biri için farklı glifler kullanır. Ayrı bir odak rolü klavye konumunu belirtir; bu nedenle bir kontrol, seçili olduğunu görünür biçimde korurken klavyedeki bir sonraki eylemin nerede gerçekleşeceğini de gösterebilir.
Adlandırılmış aralık ölçeğinde dört, sekiz, on iki, on altı, yirmi dört ve otuz iki piksellik değerler bulunur. Paneller masaüstünde yirmi dört, dar ekranlarda on altı piksellik değeri kullanır. Belirtim tablosu bu somut tercihleri özgün yapılandırma olarak belgeler; böylece okurlar, örnek stillerini paketin garanti ettiği özelliklerle karıştırmadan bunları yeniden oluşturabilir veya değiştirebilir.
Bits UI Tasarım Sistemi Elle İşaretlenen Bir Maddeyi Otomatik Test Sonucundan Ayırın
Elle İşaretlemeyi Otomatik Test Sonucundan Ayırın
Kontrol listesi, okurun işaretlediği maddeleri kaydeder. Başka bir sayfayı incelemez, klavye testleri çalıştırmaz veya erişilebilirlik uyumluluğunu doğrulamaz. Altı kontrol gerçek erişilebilirlik davranışlarıyla ilgili olduğundan, hem giriş metninde hem de inceleme açıklamasında bu kapsamın açıkça belirtilmesi gerekir.
Altı maddenin tümü işaretlenene kadar Kaydet devre dışıdır. Kaydedilen mesaj, altı maddenin de okur tarafından işaretlendiğini ve sonucun yerel olduğunu belirtir. Eksik işleri incelemek için kısmi bir inceleme yine de açılabilir; ancak tamamlanmış inceleme mesajı oluşturamaz. Bu ayrım, örneğin durum geçişlerinin anlamlı kalmasını sağlar.
Herhangi bir bireysel veya toplu değişiklik, kaydedilmiş durumu temizler. Böylece bir kontrol kaldırıldıktan sonra tamamlanma onayı ekranda kalmaz. Tümünü temizle eylemi ayrıca başlangıçta açık olan bölümü yeniden açar ve inceleme diyaloğunu kapatır; böylece ilişkili tüm durumlar bilinen bir başlangıç noktasına döner.
Durum bölgesi katmanın dışında bulunur; bu nedenle kaydedilmiş mesaj, diyalog kapandıktan sonra da belgede kalır. Mesaj, yerel sayfa durumunu açıklar ve bir raporun gönderildiği izlenimini yaratmaz. Sayfa yenilendiğinde kontrol listesi sıfırlanır; bu, kendi başına çalışan bu örnek için uygundur.
Bits UI Tasarım Sistemi Bileşen Parçalarını Görünür Etiketlere Bağlayın
Bileşen Parçalarını Görünür Etiketlere Bağlayın
Her onay kutusunun sabit bir kimliği ve bu kimlikle ilişkilendirilmiş görünür bir etiketi vardır. İşaretli veya belirsiz durumu yerel kontrolle temsil edilir; tik ve çizgi ise dekoratiftir. Kısmi seçimin sıradan, işaretlenmemiş bir öğe gibi duyurulmaması için hem Boolean işaretli değerini hem de türetilen belirsiz değeri toplu kontrole bağlı tutun.
Dialog.Title ve Dialog.Description, yerel bileşen yapısı aracılığıyla incelemenin adını ve açıklamasını sağlar. Portal, katmanı Accordion düzeninden ayırırken Dialog.Close açık bir kapatma eylemi sunar. Dışarıdaki durum bölgesi, katman kapandıktan sonra da kaydedilmiş sonucu tutar; böylece sonuç diyalog içeriğiyle birlikte kaybolmaz.
Görünür etiketi kontrolle ilişkilendirin.
Özel stilleri uyguladıktan sonra da belirgin bir focus-visible halkasını koruyun.
Bir diyaloğu yeniden biçimlendirirken başlık veya açıklama parçalarını kaldırmayın.
$state/$derived modelleri, kontrollü onay kutuları ve Portal tabanlı inceleme diyaloğuyla yerel Bits UI bileşimi.
svelte
<script>
import {Accordion,Checkbox,Dialog} from 'bits-ui';
let groups=$state([{id:'keyboard',name:'Keyboard flow',description:'Move through the interface without a pointer.',checks:[{id:'focus',label:'Every action has a visible focus indicator.',done:false},{id:'order',label:'Focus follows the visual reading order.',done:false}]},{id:'forms',name:'Form correction',description:'Make a mistake and recover from it.',checks:[{id:'labels',label:'Each input has a persistent visible label.',done:false},{id:'errors',label:'Errors identify the field and explain the correction.',done:false}]},{id:'feedback',name:'Result feedback',description:'Confirm that the outcome is understandable.',checks:[{id:'status',label:'A status message describes the completed action.',done:false},{id:'color',label:'Meaning remains clear without color alone.',done:false}]}]);
let expanded=$state(['keyboard']),open=$state(false),saved=$state(false);
const complete=$derived(groups.reduce((sum,g)=>sum+g.checks.filter(c=>c.done).length,0));
function change(check,value){check.done=value;saved=false}
function all(value){groups.forEach(g=>g.checks.forEach(c=>c.done=value));saved=false}
function reset(){all(false);expanded=['keyboard'];open=false}
</script>
<main class="check-shell"><header><p class="eyebrow">INTERFACE REVIEW · MANUAL CHECKLIST</p><h1>Check the experience between the screens.</h1><p>Work through six practical checks, then review what you have marked. This is a personal checklist, not an automated accessibility test.</p></header><div class="check-layout"><section class="check-panel"><div class="bulk"><Checkbox.Root id="all-checks" checked={complete===6} indeterminate={complete>0&&complete<6} onCheckedChange={all} class="checkbox"><span aria-hidden="true">{complete===6?'✓':complete>0?'−':''}</span></Checkbox.Root><label for="all-checks">Mark all checks</label><span class="count">{complete}/6</span></div><Accordion.Root type="multiple" bind:value={expanded} class="accordion">{#each groups as group}<Accordion.Item value={group.id} class="accordion-item"><Accordion.Header class="accordion-heading"><Accordion.Trigger class="accordion-trigger"><span>{group.name}<small>{group.checks.filter(c=>c.done).length} of 2 checked</small></span><span class="plus" aria-hidden="true">+</span></Accordion.Trigger></Accordion.Header><Accordion.Content class="accordion-content"><p class="group-description">{group.description}</p>{#each group.checks as check}<div class="check-row"><Checkbox.Root id={check.id} checked={check.done} onCheckedChange={value=>change(check,value)} class="checkbox"><span aria-hidden="true">{check.done?'✓':''}</span></Checkbox.Root><label for={check.id}>{check.label}</label></div>{/each}</Accordion.Content></Accordion.Item>{/each}</Accordion.Root><Dialog.Root bind:open><Dialog.Trigger class="primary">Review checklist</Dialog.Trigger><Dialog.Portal><Dialog.Overlay class="overlay"/><Dialog.Content class="dialog"><Dialog.Title class="dialog-title">Your review snapshot</Dialog.Title><Dialog.Description class="dialog-description">{complete} of 6 checks are marked. Saving records your own review state; it does not certify the interface.</Dialog.Description><ul class="review-summary">{#each groups as group}<li><strong>{group.name}</strong><span>{group.checks.filter(c=>c.done).length} / 2</span></li>{/each}</ul>{#if complete<6}<p class="remaining">Return to the checklist to finish the remaining {6-complete} checks.</p>{/if}<div class="dialog-actions"><Dialog.Close class="secondary">Back to checks</Dialog.Close><button class="primary" disabled={complete<6} onclick={()=>{saved=true;open=false}}>Save completed review</button></div></Dialog.Content></Dialog.Portal></Dialog.Root><button class="reset" onclick={reset}>Clear all checks</button><p class="result" role="status">{saved?'Completed review saved locally. All six checks were marked by you.':'Progress stays in this preview until you reload.'}</p></section><aside class="check-notes"><div class="focus-art" aria-hidden="true"><span></span><i></i><b></b></div><p class="eyebrow">WHAT TO LOOK FOR</p><h2>Make the next action clear.</h2><p>A good check leaves evidence: where focus moved, what an error said, or how a result was announced.</p><dl><div><dt>Keyboard</dt><dd>Tab, Shift+Tab, Enter and Escape should support the relevant task.</dd></div><div><dt>Correction</dt><dd>Keep the user’s input and point to a specific next step.</dd></div><div><dt>Feedback</dt><dd>Describe the outcome in words as well as visual styling.</dd></div></dl></aside></div></main>
Bunlar özgün --app-* değişkenleridir; resmî bir Bits paleti değildir.
Odak ve azaltılmış hareket stilleri dahildir.
Yalnızca katmanda, görüntü alanına göre belirlenen maksimum yükseklik kullanılır.
04
Bits UI Tasarım Sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Svelte 5.57.1 ile Bits UI 2.19.5 sürümlerinde doğrulanmıştır. Özgün stil sayfasının tamamı gereklidir; Bits UI varsayılan renkler veya sayfa düzeni sağlamaz.
JavaScript
// npm create vite@latest bits-review -- --template svelte
// cd bits-review && npm install
// npm install [email protected][email protected]
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan elle yürütülen arayüz incelemesini oluşturmak için Bits UI 2.19.5 ve Svelte 5 kullanın. Üç Accordion bölümündeki altı kontrolü koruyun, toplu işaretli/belirsiz durumunu bireysel yanıtlardan türetin ve bölümler daraltıldığında yanıtları saklayın. İnceleme için Dialog bileşenlerinin tüm parçalarını bir araya getirin; eksik incelemelerin açılmasına izin verirken altı maddenin tümü işaretlenene kadar Kaydet seçeneğini devre dışı bırakın. Her yanıt değişikliği kaydedilmiş geri bildirimi geçersiz kılsın; Tümünü temizle, başlangıçtaki bölüm genişletme durumunu geri yükleyip incelemeyi kapatsın. CSS dosyasının tamamını ekleyin ve sonuçları otomatik erişilebilirlik sertifikası olarak değil, okurun yerel olarak işaretlediği kontroller olarak tanımlayın.
05
Bits UI Tasarım Sistemi Kaynakları ve Kapsamı
Svelte 5.57.1 ile Bits UI 2.19.5. Özgün uygulama token'ları ve illüstrasyonlar. Bu, yerel durum kullanan elle doldurulan bir kontrol listesidir; otomatik erişilebilirlik denetimi veya sertifikası değildir.
