Gerçek 5.9 tema değişkenleri, yerel sekmeler ve toplu onay kutusu seçimiyle oluşturulmuş CoreUI inceleme kuyruğu; son yerel arşivleme işlemini geri alabilen kalıcı bir toast da içerir.
Bootstrap 5.9.0 için yerel CoreUI CSS ve paketle gelen Sekme/Bildirim JavaScript. · Uygulama başvurusu
02
CoreUI Tasarım Sistemi Tasarım Referansı
Kurulu derlenmiş stil sayfasındaki Bootstrap 5.9.0 açık tema varsayılanları için CoreUI. Bu --cui-* adları, çalışma zamanındaki gerçek değişkenlerdir. Örnek uygulama ücretsiz bileşenleri kullanır; CoreUI PRO araçlarını varsaymaz.
CoreUI Tasarım Sistemi Gerçekte Kullandığınız CoreUI Çalışma Zamanı Ortamını Seçin
Gerçekte Kullandığınız CoreUI Çalışma Zamanı Ortamını Seçin
Bu örnek, CoreUI için Bootstrap 5.9.0 sürümünü, yani CSS ve tarayıcı-JavaScript paketini kullanır. CoreUI, çerçeveye özgü paketlere de sahiptir; ancak bu paketlerdeki bileşen içe aktarımları, bu örneğin veri öznitelikleriyle birbirinin yerine kullanılamaz. Kurulum, React veya Vue sağlayıcısı varsaymadan eşleşen bir stil sayfası ve paketlenmiş bir betik sağlar.
İnceleme masasında ücretsiz kartlar, tablolar, formlar, sekmeler ve bildirimler kullanılır. PRO veri ızgarası ya da gelişmiş ücretli seçici sessizce devreye sokulmaz. Bu sınır, eksiksiz örneğin belgelenmemiş bir şablon satın alımı gerektirmeden adı belirtilen paketten yeniden oluşturulabilmesini sağlar.
CoreUI Tasarım Sistemi Gerçek Mor Birincil Rengi ve Eşleşen Durum Rollerini Kullanın
Gerçek Mor Birincil Rengi ve Eşleşen Durum Rollerini Kullanın
CoreUI açık temada birincil rengi #5856d6, birincil kontrast rengi ise beyazdır. İnceleme ilkesi kartında primary-bg-subtle, primary-border-subtle ve primary-text-emphasis birlikte kullanılır. Bu adlar, birbiriyle uyumlu bir yüzey düzenini tanımlar; dolayısıyla destekleyici metin, gelişigüzel bir ön plan rengiyle renklendirilmiş bir arka plan üzerine yerleştirilmez.
Yüksek ve Orta rozetlerinde de danger veya warning yumuşak yüzeyleri, vurgu metinleriyle eşleştirilir. Metin etiketleri, renklerden bağımsız olarak sınıflandırmayı belirtir. Bunlar örnek tasarım incelemesi öncelikleridir; her üründeki kırmızı rozetin aynı alan durumunu ifade ettiği iddia edilmez.
CoreUI Tasarım Sistemi Varsayılan Gövde Yazı Tipini Yoğun İş Tablosundan Ayırın
Varsayılan Gövde Yazı Tipini Yoğun İş Tablosundan Ayırın
Derlenmiş CoreUI gövde varsayılanı bir rem boyutunda ve 1.5 satır yüksekliğindedir. Örnek, yoğun bir inceleme kuyruğunu desteklemek için tabloda on dört piksellik metin, sütun etiketlerinde ise on iki piksellik metin kullanır. Sayfa başlığı ve özet değerlerinin kendi özgün, daha büyük boyutları vardır. Kılavuz, bu uygulama geçersiz kılmalarını kitaplık genelindeki varsayılanlar olarak yanlış tanımlamaz.
Üç bağlam kartında yerel duyarlı ızgara ve g-3 aralığı kullanılır. Gelen Kutusu ve Arşiv küçük ekranlarda yan yana kalırken açıklama içeren üçüncü kart tam satırı kaplar. Her sayı, görünür durumdaki beş örnek kaydından hesaplanır; ilgisiz gösterge paneli metrikleri veya uydurma büyüme grafikleri yoktur.
CoreUI Tasarım Sistemi Veri Öznitelikleri Gerçek Sekme Panellerini Denetler
CoreUI Veri Öznitelikleri Gerçek Sekme Panellerini Denetler
Gelen Kutusu ve Arşiv, data-coreui-toggle="tab" kullanan ve eşleşen sekme panellerini hedefleyen düğme tabanlı sekmelerdir. İşaretlemede tablist, tab, tabpanel, aria-controls ve aria-labelledby ilişkileri bulunur. CoreUI JavaScript bileşeni, yalnızca uygulama işleyicisinin alt çizgiyi değiştirmesi yerine etkin durumu ve görünürlüğü günceller.
nav-underline-border sınıfı, bu bileşenin görsel biçimini belirler. Sekme değiştirmek kayıtları arşivlemez veya seçimi temizlemez. Sekme, yerel kuyruğun hangi bölümünün gösterileceğini belirler; uygulamanın seçili ve arşivlenmiş Set nesneleri ise ayrı durumlar olarak kalır.
CoreUI Tasarım Sistemi Tümünü Seç İşleminin Anlamlı Bir Karma Durumu Olmalı
Tümünü Seç İşleminin Anlamlı Bir Karma Durumu Olmalı
Her notun sabit bir R serisi kimliği vardır. Bir satırın onay kutusu işaretlendiğinde, kimliği seçili Set nesnesine eklenir. Üstbilgideki onay kutusu yalnızca gelen kutusundaki tüm geçerli kayıtlar seçildiğinde işaretlenir; bazıları seçildiğinde karma duruma geçer, gelen kutusu boş olduğunda ise devre dışı kalır. Kuyruk her görüntülendiğinde bu durumlar yeniden hesaplanır.
Hiçbir şey seçilmediğinde toplu işlem düğmesi devre dışıdır; yanındaki metin geçerli sayıyı bildirir. Arşivleme işleminden sonra seçim temizlenir; böylece zaten arşivlenmiş bir kayıt yanlışlıkla sonraki grupta kalmaz. Kayıt, genel bir Çözüldü etiketiyle değiştirilmek yerine özgün notunu ve sahibini korur.
İki not seçin ve üstbilgi onay kutusunun karma durumunu inceleyin.
Seçimi arşivleyin ve gelen kutusu sayısının iki azaldığını doğrulayın.
Özgün istekleri ve sahiplerini okumak için Arşiv'i açın.
CoreUI Tasarım Sistemi Bildirim, Geri Alınabilir Tek Bir İşlemi Sunar
Bildirim, Geri Alınabilir Tek Bir İşlemi Sunar
Uygulama, arşivlenen en son grubun tam kimliklerini kaydeder, ardından yerel Toast örneğinin show yöntemini çağırır. Bildirimde Geri Al işlemi bulunduğundan autohide false olarak ayarlanır; örnek, keyfî ve kısa bir zamanlayıcının geri alma olanağını ortadan kaldırmasına izin vermez. Bildirim yine de kullanıcı tarafından kapatılabilir.
Geri alma işlemi, kaydedilmiş kimlikleri arşivlenmiş Set nesnesinden çıkarır, son grup anlık görüntüsünü temizler ve ilgili işlemi devre dışı bırakır. Daha sonraki bir grup geri alındığında önceki arşivleme grubu arşivlenmiş olarak kalır. Bu, eksiksiz bir geri alma geçmişi sunduğu yönünde yanıltıcı bir iddiada bulunmayan, kasıtlı olarak tek seviyeli bir işlemdir.
CoreUI Tasarım Sistemi İstek Arşivlendikten Sonra da Okunabilir Kalsın
İstek Arşivlendikten Sonra da Okunabilir Kalsın
Gelen kutusu tablosunda notun başlığı, istenen değişiklik, alan, öncelik ve sahibi gösterilir. Arşiv görünümünde başlığı, kimliği, sahibi ve isteğin tamamını koruyan kompakt bir liste sunulur. Çözümün ardından tabloyu çevreleyen görsel öğeler azaltılır; ancak yapılan değişikliği anlamak için gereken bilgiler silinmez.
Mobilde tablo, table-responsive içinde 740px minimum genişliğini korur. Adlandırılmış bölge klavyeyle odaklanabilir ve görünür bir odak biçimine sahiptir; yatay kaydırma, belgeyi genişletmek yerine tablo alanında kalır. Kaydırma çubuğundan kaçınmak uğruna önemli sütunları kaldırmak bu inceleme görevini zayıflatır.
CoreUI Tasarım Sistemi Arka Uç Uydurmadan Kalıcı Bir Sonuç Sunun
Arka Uç Uydurmadan Kalıcı Bir Sonuç Sunun
Bildirimin rolü polite durum olarak ayarlanır ve duyuru atomic özelliğine sahiptir. İkinci bir satır içi durum mesajı, yerel arşivleme veya geri alma sonucunu açıklar. Hiçbiri harici bir iş kaydının kapatıldığını söylemez: sayfada bağlı bir iş takip sistemi olmadığı açıkça belirtilir. Önizleme yalnızca bellekteki Set nesnelerini değiştirir; dolayısıyla sayfa yeniden yüklendiğinde özgün beş not geri gelir.
Kayıt başlıkları ve açıklamaları, arşiv listesi de dâhil olmak üzere textContent kullanılarak eklenir. Sabit sınıf eşlemeleri, bilinen iki önceliği temsil eder. Böylece kullanıcı girdisine benzeyen metin HTML yapısından ayrı tutulur ve örneğin veri akışı incelenebilir hâle gelir.
Gerçek grup boyutunu ve yerel kapsamı açıklayın.
Anlık görüntü geçerliyken geri alma düğmesini kullanılabilir durumda tutun.
Yerel bir DOM güncellemesini uzak bir çözüm olarak adlandırmayın.
CoreUI Tasarım Sistemi Yerel Modülden Önce CoreUI Paketini Yükleyin
Yerel Modülden Önce CoreUI Paketini Yükleyin
Kurulumun tamamı, paketin dist varlıklarını yerel bir genel erişim yoluna kopyalar ve coreui.bundle.min.js dosyasını app.js dosyasından önce yükler. Paket, coreui.Toast nesnesini sunar ve data-coreui öznitelikleri için sekme davranışını sağlar. Bu düzenlemede ikinci bir Bootstrap çalışma zamanı eklemek gereksizdir ve sahipliğin yinelenerek kafa karışıklığı yaratmasına yol açabilir.
Açık tema, data-coreui-theme="light" aracılığıyla açıkça belirtilir. Daha büyük bir uygulama CoreUI’ın renk modu mekanizmasını kullanabilir; ancak anlamsal metin ve yüzey çiftlerini birlikte gözden geçirmelidir. Yerel doğrulama; kısmi seçimi, iki kayıtlı bir toplu işlemi, arşiv sekmesinin okunmasını, geri alma işlemiyle kayıtların geri yüklenmesini ve 390px görünüm alanını kapsadı.
Bu paketle başka bir kütüphaneden kopyalanmış data-bs-* özniteliklerini değil, data-coreui-* özniteliklerini kullanın.
Tabloda adlandırılmış, yerel bir yatay kaydırma alanı bulunur.
Öncelik renkleri, açıkça belirtilen Yüksek/Orta etiketleriyle eşleştirilmiştir.
Toplu seçim ve son toplu işlemi geri alma
Sabit kayıt kimlikleri, seçili ve arşivlenmiş kümeleri belirler; Toast bileşeni ise bildirimin görünürlüğünü yönetir.
JavaScript
const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false});
function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='<td><input class="form-check-input" type="checkbox"></td><td><strong></strong><p class="small text-body-secondary mb-0 mt-1"></p></td><td></td><td><span class="badge"></span></td><td></td>';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();}
function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size<total;}
q('#select-all').onchange=e=>{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render();
Tablo için belirlenen 740px genişlik, uygulamanın okunabilirlik tercihidir; CoreUI varsayılanı değildir.
04
CoreUI Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
Bootstrap 5.9.0 için CoreUI doğrulandı. Sağlanan app.js, kuyruk işaretlemesinin tamamını bekler ve ağ işlemi sunmaz. HTML sarmalayıcısı gövde işaretlemesinin tamamını içerir; sağlanan etkileşim ve CSS örneklerini burada belirtilen dosya adlarıyla kaydedin.
html
<!-- npm install @coreui/[email protected] -->
<!-- Copy node_modules/@coreui/coreui/dist to public/vendor/coreui. -->
<html lang="en" data-coreui-theme="light">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/vendor/coreui/css/coreui.min.css">
<link rel="stylesheet" href="style.css">
<main class="review-desk"><header class="desk-heading"><div><p class="eyebrow">COREUI · REVIEW OPERATIONS</p><h1>Keep the review queue moving.</h1><p class="text-body-secondary">Archive resolved design notes and undo the last local batch.</p></div><span class="badge text-bg-primary">LOCAL WORKSPACE</span></header><div class="row g-3 mb-4"><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Inbox</div><strong id="inbox-count">5</strong><span>design notes</span></div></div></div><div class="col-6 col-md-4"><div class="card metric"><div class="card-body"><div class="text-body-secondary small">Archived</div><strong id="archive-count">0</strong><span>local resolutions</span></div></div></div><div class="col-12 col-md-4"><div class="card metric context-card"><div class="card-body"><div class="text-body-secondary small">Review principle</div><p class="mt-2 mb-0">Keep the original request visible, even after the note is resolved.</p></div></div></div></div><section class="card"><div class="card-header bg-body"><ul class="nav nav-underline-border" role="tablist"><li class="nav-item" role="presentation"><button id="inbox-tab" class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#inbox-panel" type="button" role="tab" aria-controls="inbox-panel" aria-selected="true">Inbox</button></li><li class="nav-item" role="presentation"><button id="archive-tab" class="nav-link" data-coreui-toggle="tab" data-coreui-target="#archive-panel" type="button" role="tab" aria-controls="archive-panel" aria-selected="false">Archive</button></li></ul></div><div class="tab-content"><div id="inbox-panel" class="tab-pane fade show active" role="tabpanel" aria-labelledby="inbox-tab" tabindex="0"><div class="batch-bar"><span id="selection" class="small text-body-secondary">No notes selected</span><button id="archive" class="btn btn-primary btn-sm" disabled>Archive selected</button></div><div class="table-responsive" tabindex="0" role="region" aria-label="Design review inbox"><table class="table table-hover align-middle mb-0"><thead><tr><th scope="col"><input id="select-all" class="form-check-input" type="checkbox" aria-label="Select all inbox notes"></th><th scope="col">Design note</th><th scope="col">Area</th><th scope="col">Priority</th><th scope="col">Owner</th></tr></thead><tbody id="inbox-rows"></tbody></table></div><p id="inbox-empty" class="empty-copy" hidden>All sample notes are archived. Open Archive to inspect them.</p></div><div id="archive-panel" class="tab-pane fade" role="tabpanel" aria-labelledby="archive-tab" tabindex="0"><div class="p-4"><h2 class="h5">Resolved in this local session</h2><p class="text-body-secondary small">The original note and owner stay attached to the record.</p><ul id="archive-list" class="list-group list-group-flush"></ul><p id="archive-empty" class="mb-0 text-body-secondary">No notes archived yet.</p></div></div></div></section><section class="decision-key"><span class="badge bg-danger-subtle text-danger-emphasis">High</span><p>Blocks a clear next action or access to important information.</p><span class="badge bg-warning-subtle text-warning-emphasis">Medium</span><p>Creates avoidable friction while the flow remains usable.</p></section><div class="toast-container position-static mt-4"><div id="undo-toast" class="toast w-100" role="status" aria-live="polite" aria-atomic="true"><div class="toast-header"><strong class="me-auto">Local archive updated</strong><button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Dismiss notice"></button></div><div class="toast-body"><p id="toast-copy" class="mb-3"></p><button id="undo" class="btn btn-outline-primary btn-sm">Undo last batch</button></div></div></div><p id="result" class="small text-body-secondary mt-3" role="status">No external issue tracker is connected.</p></main>
<script src="/vendor/coreui/js/coreui.bundle.min.js"></script>
<script src="app.js"></script>
</html>
Projeniz İçin Bir İstem
Ajan İstemi
CoreUI 5.9.0 tasarım inceleme operasyonları masasıyla başlayın. data-coreui özniteliklerini kullanarak yerel sekmeleri ve geri alma bildirimini, beş inceleme kaydını ve türetilmiş karma toplu seçim durumuyla birlikte seçili kimlik kümesini koruyun. Seçili toplu işlemi arşivleyin, arşiv sekmesinde gösterin ve Geri Al ile son toplu işlemi geri yükleyin. Tablonun yatay kaydırmasını kendi alanında tutun; seçili olma durumunu arşiv üyeliğinden ayırın. Eşleşen CoreUI paketini kullanın; Bootstrap öznitelik adlarını kullanmayın ve sunucu tarafında arşivleme yapıldığını iddia etmeyin.
05
CoreUI Tasarım Sistemi Kaynakları ve Kapsamı
Bootstrap 5.9.0 ücretsiz bileşenleri için CoreUI. Tema varsayılanları ile özgün yoğunluk tercihleri birbirinden ayrılmıştır. Arşivleme ve geri alma yalnızca yerel örnek kayıtları etkiler.
