# CoreUI Tasarım Sistemi

## CoreUI Tasarım Sistemi Arayüz Önizlemesi

Notları seçin, bir grubu arşivleyin, Arşiv sekmesini inceleyin ve son işlemi geri alın.

## 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.

### Açık tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-primary | #5856d6 | CoreUI birincil mor. |
| --cui-primary-contrast | #fff | Birincil renkle eşleşen metin. |
| --cui-secondary | #6b7785 | İkincil rol. |
| --cui-success | #1b9e3e | Başarı rolü. |
| --cui-info | #39f | Bilgi rolü. |
| --cui-warning | #f9b115 | Uyarı rolü. |
| --cui-danger | #e55353 | Tehlike rolü. |
| --cui-primary-bg-subtle | #cfc7f3 | Yumuşak birincil bağlam kartı arka planı. |
| --cui-primary-text-emphasis | #3634a3 | Yumuşak birincil yüzeydeki metin. |
| --cui-primary-border-subtle | #9d92e6 | Bağlam kartı kenarlığı. |
| --cui-danger-bg-subtle | #f9d4d4 | Yüksek öncelikli rozet yüzeyi. |
| --cui-danger-text-emphasis | #671414 | Yüksek öncelikli rozet metni. |
| --cui-warning-bg-subtle | #feecc5 | Orta öncelikli rozet yüzeyi. |
| --cui-warning-text-emphasis | #764705 | Orta öncelikli rozet metni. |
### Tipografi ve yüzey varsayılanları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Sistem kullanıcı arayüzü yazı tipi yığını. |
| --cui-body-font-size | 1rem | Varsayılan gövde boyutu 1rem; yoğun tablo için özgün 14px geçersiz kılması kullanılır. |
| --cui-body-line-height | 1.5 | Varsayılan gövde satır yüksekliği. |
| --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Açık temada birincil gövde rengi. |
| --cui-body-bg | #fff | Birincil yüzey. |
| --cui-tertiary-bg | #f3f4f7 | Bu örnekteki sayfa arka planı. |
| --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Destekleyici metin rolü. |
| --cui-border-color | #dbdfe6 | Varsayılan ayırıcı rengi. |
### Köşe ve odak değişkenleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --cui-border-radius | 0.375rem | 16px kök boyutunda varsayılan 6px karşılığı. |
| --cui-border-radius-sm | 0.25rem | Küçük boyut, 4px karşılığı. |
| --cui-border-radius-lg | 0.5rem | Büyük boyut, 8px karşılığı. |
| --cui-border-radius-xl | 1rem | Ekstra büyük boyut, 16px karşılığı. |
| --cui-border-radius-pill | 50rem | Hap biçimli kenar. |
| --cui-focus-ring-width | 0.25rem | Odak halkası genişliği. |
| --cui-focus-ring-opacity | 0.25 | Odak halkası opaklığı. |
| --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Birincil renge dayalı odak halkası rengi. |
### Özgün kuyruk yoğunluğu seçenekleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Page padding | 32px; 24px 14px mobile | Özgün uygulama iç boşluğu. |
| Table minimum width | 740px | Sütunlar, yerel duyarlı kaydırma alanında okunabilir kalır. |
| Table cell padding | 16px | Yerel tablo yapısına uygun özgün yoğunluk seçeneği. |
| Table text | 14px; headings 12px | Özgün kompakt hiyerarşi. |
| g-3 summary row | 1rem native gutter | Duyarlı metrik kartlarında standart ızgara aralığı kullanılır. |
| Toast behavior | autohide: false | Geri alma işlemi, kapatılana veya daha sonraki bir grupla değiştirilene kadar kullanılabilir. |
## CoreUI Tasarım Sistemi Kapsamlı 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ı.

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

1. İki not seçin ve üstbilgi onay kutusunun karma durumunu inceleyin.

2. Seçimi arşivleyin ve gelen kutusu sayısının iki azaldığını doğrulayın.

3. Özgün istekleri ve sahiplerini okumak için Arşiv'i açın.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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.

Destekleyici belirtimi okuyun

## 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ı.

Destekleyici belirtimi okuyun

## CoreUI Tasarım Sistemi Bileşen Örnekleri

### Kuyruk, arşiv sekmesi ve geri alma bildirimi

CoreUI veri öznitelikleri, tablo kontrolleri, anlamsal öncelik rozetleri ve kalıcı bildirim.

```
<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>
```

Kod referansı

- 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.

```
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();
```

Kod referansı

- Tümünü seç özelliği; seçili, seçili değil ve belirsiz durumlarını gösterir.

- Geri alma işlemi, en son toplu işlemdeki kimliklerin tümünü geri yükler.

- Tüm kayıt metinleri textContent ile eklenir.

### Özgün kuyruk yoğunluğu

Yerel CoreUI kartları ve tablo stilleriyle oluşturulan sayfa düzeni.

```
html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}}
```

Kod referansı

- Tablo için belirlenen 740px genişlik, uygulamanın okunabilirlik tercihidir; CoreUI varsayılanı değildir.

## 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.

```
<!-- npm install @coreui/coreui@5.9.0 -->
<!-- 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

```
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.
```

## 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.

- Giriş CSS ve paketlenmiş JavaScript ile eşleştirildi.

- CSS değişkenleri Çalışma zamanı tema özelleştirmesi.

- Renkler Anlamsal tema rolleri.

- Tipografi Yerel tipografi temelleri.

- Sekmeler Veri öznitelikleri ve panel anlamı.

- Bildirimler Kalıcı bildirim ve bileşen yöntemleri.

- Onay kutuları Yerel onay kutusu durumları.

- Tablolar Duyarlı tablo düzeni.

## CoreUI Tasarım Sistemi İlgili Kaynaklar

### daisyUI

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.

### Element Plus

Modül seçimi için bir çalışma alanı oluştururken Element Plus’ın gerçek Transfer modelini, filtrelerini ve devre dışı seçeneklerini kullanın; doğrulanmış renkler, yazı boyutları ve kontrol ölçüleriyle destekleyin.

### Flowbite

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.


- [Uygulama başvurusu](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [Kaynak](https://coreui.io/bootstrap/docs/customize/color/)
- [Kaynak](https://coreui.io/bootstrap/docs/content/typography/)
- [Kaynak](https://coreui.io/bootstrap/docs/customize/css-variables/)
- [Kaynak](https://coreui.io/bootstrap/docs/layout/gutters/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/getting-started/introduction/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/customize/color/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/content/typography/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/forms/checks-radios/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/components/toasts/)
- [Destekleyici belirtimi okuyun](https://coreui.io/bootstrap/docs/content/tables/)
- [Kod referansı](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [Kod referansı](https://coreui.io/bootstrap/docs/components/toasts/)
- [Kod referansı](https://coreui.io/bootstrap/docs/content/tables/)
- [Giriş CSS ve paketlenmiş JavaScript ile eşleştirildi.](https://coreui.io/bootstrap/docs/getting-started/introduction/)
- [CSS değişkenleri Çalışma zamanı tema özelleştirmesi.](https://coreui.io/bootstrap/docs/customize/css-variables/)
- [Renkler Anlamsal tema rolleri.](https://coreui.io/bootstrap/docs/customize/color/)
- [Tipografi Yerel tipografi temelleri.](https://coreui.io/bootstrap/docs/content/typography/)
- [Sekmeler Veri öznitelikleri ve panel anlamı.](https://coreui.io/bootstrap/docs/components/navs-tabs/)
- [Bildirimler Kalıcı bildirim ve bileşen yöntemleri.](https://coreui.io/bootstrap/docs/components/toasts/)
- [Onay kutuları Yerel onay kutusu durumları.](https://coreui.io/bootstrap/docs/forms/checks-radios/)
- [Tablolar Duyarlı tablo düzeni.](https://coreui.io/bootstrap/docs/content/tables/)
