Una coda di revisione CoreUI realizzata con le variabili reali del tema 5.9, schede native, selezione multipla tramite caselle di controllo e un toast persistente che consente di annullare l’ultima archiviazione locale.
Riferimento di design per il sistema di design CoreUI
Valori predefiniti del tema chiaro di CoreUI per Bootstrap 5.9.0, ricavati dal foglio di stile compilato installato. Questi nomi --cui-* sono variabili effettive di runtime. L’applicazione di esempio usa componenti gratuiti; non presuppone widget CoreUI PRO.
sistema di design CoreUI: scegli l’ambiente di runtime CoreUI che stai effettivamente usando
Scegli l’ambiente di runtime CoreUI che stai effettivamente usando
Questo esempio usa CoreUI per Bootstrap 5.9.0, il pacchetto CSS e JavaScript per browser. CoreUI offre anche pacchetti specifici per framework, ma le relative importazioni dei componenti non sono intercambiabili con gli attributi data di questo esempio. La configurazione fornisce un foglio di stile abbinato e uno script in bundle, senza presupporre un provider React o Vue.
La postazione di revisione usa schede, tabelle, moduli, schede di navigazione e notifiche toast gratuite. Non sostituisce di nascosto questi elementi con una griglia di dati PRO o un selettore avanzato a pagamento. Questo limite permette di riprodurre l’esempio completo usando il pacchetto indicato, senza richiedere l’acquisto di un modello non documentato.
sistema di design CoreUI: usa il viola primario effettivo e i ruoli di stato abbinati
Usa il viola primario effettivo e i ruoli di stato abbinati
Il colore primario chiaro di CoreUI è #5856d6, con contrasto bianco per il primario. La scheda dei principi di revisione usa insieme primary-bg-subtle, primary-border-subtle e primary-text-emphasis. Questi nomi descrivono un trattamento coordinato della superficie: il testo di supporto non viene quindi collocato su uno sfondo colorato con un colore di primo piano scelto arbitrariamente.
Anche le etichette High e Medium abbinano superfici tenui danger o warning al rispettivo testo emphasis. Le etichette testuali mantengono la classificazione indipendentemente dal colore. Si tratta di priorità di revisione del design a scopo esemplificativo, non dell’affermazione che ogni etichetta rossa di un prodotto debba indicare lo stesso stato di dominio.
sistema di design CoreUI: distingui la tipografia predefinita del corpo del testo da quella di una tabella densa
Distingui la tipografia predefinita del corpo del testo da quella di una tabella densa
Il corpo del testo di CoreUI compilato usa come valori predefiniti un rem e un’interlinea di 1.5. Nell’esempio, la tabella usa intenzionalmente un testo di quattordici pixel e intestazioni di colonna di dodici pixel per supportare una coda di revisione densa. Il titolo e i valori di riepilogo della pagina hanno dimensioni originali più grandi. La guida non presenta erroneamente queste sovrascritture dell’applicazione come valori predefiniti dell’intera libreria.
Le tre schede contestuali usano la griglia adattabile nativa e la spaziatura g-3. Posta in arrivo e Archivio restano affiancate sugli schermi piccoli, mentre la terza scheda esplicativa occupa un’intera riga. Ogni numero deriva dai cinque record di esempio visibili: non ci sono metriche di dashboard estranee né grafici di crescita inventati.
sistema di design CoreUI: gli attributi data controllano veri pannelli delle schede
Gli attributi data di CoreUI controllano veri pannelli delle schede
Posta in arrivo e Archivio sono schede basate su pulsanti, con data-coreui-toggle="tab" e target che puntano ai pannelli corrispondenti. Il markup include le relazioni tablist, tab, tabpanel, aria-controls e aria-labelledby. Il componente CoreUI JavaScript aggiorna lo stato attivo e la visibilità, invece di affidare a un semplice gestore dell’applicazione la modifica di una sottolineatura.
La classe nav-underline-border definisce il trattamento visivo di questo componente. Cambiare scheda non archivia i record né cancella una selezione. La scheda controlla quale parte della coda locale viene mostrata, mentre gli insiemi selected e archived dell’applicazione restano stati separati.
sistema di design CoreUI: la selezione di tutti gli elementi prevede uno stato intermedio significativo
La selezione di tutti gli elementi prevede uno stato intermedio significativo
Ogni nota usa un ID stabile della serie R. Selezionando una riga, il relativo ID viene aggiunto a un Set selected. La casella di selezione nell’intestazione è selezionata solo quando sono selezionati tutti i record correnti della posta in arrivo; è indeterminata quando ne è selezionato solo qualcuno e disabilitata quando la posta in arrivo è vuota. Questi stati vengono ricalcolati a ogni aggiornamento della coda.
Il pulsante per l’azione in blocco è disabilitato quando non è selezionato nulla e il testo adiacente indica il conteggio corrente. Dopo un’archiviazione, la selezione viene cancellata, così un record già archiviato non può restare selezionato accidentalmente per il gruppo successivo. La nota originale e il proprietario restano associati al record, invece di essere sostituiti da un’etichetta generica Risolto.
Seleziona due note ed esamina lo stato intermedio della casella nell’intestazione.
Archivia la selezione e verifica che il conteggio della posta in arrivo diminuisca di due.
Apri Archivio per leggere le richieste originali e i relativi proprietari.
sistema di design CoreUI: una notifica toast presenta un’unica operazione specifica e reversibile
Una notifica toast presenta un’unica operazione specifica e reversibile
L’applicazione registra gli ID esatti dell’ultimo gruppo archiviato, quindi chiama il metodo show dell’istanza nativa Toast. autohide è false perché la notifica contiene un’azione Annulla; l’esempio non rimuove la possibilità di annullare dopo un timer breve e arbitrario. La notifica può comunque essere chiusa esplicitamente.
Annulla rimuove dal Set archived solo gli ID salvati, cancella l’istantanea dell’ultimo gruppo e disabilita l’azione. Se viene annullato un gruppo successivo, un gruppo archiviato in precedenza resta archiviato. È volutamente un’operazione a un livello, non una pretesa fuorviante di cronologia completa degli annullamenti.
sistema di design CoreUI: mantieni leggibile la richiesta anche dopo averla archiviata
Mantieni leggibile la richiesta anche dopo averla archiviata
La tabella della posta in arrivo mostra il titolo della nota, la modifica richiesta in dettaglio, l’area, la priorità e il proprietario. Archivio visualizza un elenco compatto che conserva il titolo, l’ID, il proprietario e la richiesta completa. Dopo la risoluzione riduce gli elementi visivi della tabella senza eliminare le informazioni necessarie per capire cosa è stato modificato.
Sui dispositivi mobili, la tabella mantiene una larghezza minima di 740px all’interno di table-responsive. L’area indicata è raggiungibile da tastiera e dispone di un trattamento del focus visibile; lo scorrimento orizzontale resta confinato alla tabella, senza allargare il documento. Rimuovere colonne importanti solo per evitare una barra di scorrimento renderebbe meno efficace questa attività di revisione.
sistema di design CoreUI: usa un risultato persistente senza inventare un backend
Usa un risultato persistente senza inventare un backend
La notifica toast usa il ruolo di stato polite e un annuncio atomico. Un secondo stato in linea descrive il risultato dell’archiviazione o dell’annullamento locale. Nessuno dei due afferma che un ticket esterno sia stato chiuso: la pagina specifica che non è collegata ad alcun sistema di gestione delle issue. L’anteprima modifica solo i Set in memoria, quindi ricaricando la pagina tornano le cinque note originali.
I titoli e le descrizioni dei record vengono inseriti con textContent, anche nell’elenco Archivio. Le classi associate sono mappate in modo fisso alle due priorità note. Così il testo simile a quello fornito da un utente resta separato dalla struttura HTML e il flusso dei dati dell’esempio è verificabile.
Descrivi le dimensioni effettive del gruppo e l’ambito locale.
Mantieni disponibile il pulsante di annullamento finché l’istantanea è valida.
Non definire un aggiornamento locale del DOM come una risoluzione remota riuscita.
sistema di design CoreUI: carica il bundle CoreUI prima del modulo locale
Carica il bundle CoreUI prima del modulo locale
La configurazione completa copia gli asset dist del pacchetto in un percorso pubblico locale e carica coreui.bundle.min.js prima di app.js. Il bundle espone coreui.Toast e fornisce il comportamento delle schede per gli attributi data-coreui. Per questa composizione non serve aggiungere un secondo runtime Bootstrap, che potrebbe creare confusione sulla gestione duplicata.
Il tema chiaro è esplicitato tramite data-coreui-theme="light". Un’applicazione più ampia può adottare il meccanismo di gestione della modalità colore di CoreUI, ma dovrebbe verificare insieme le coppie semantiche di testo e superficie. La verifica locale ha coperto la selezione parziale, un batch di due record, la visualizzazione della scheda Archivio, il ripristino con Annulla e una viewport di 390px.
Con questo bundle usa gli attributi data-coreui-*, non data-bs-* copiati da un’altra libreria.
La tabella dispone di un’area di scorrimento orizzontale locale e con nome accessibile.
I colori di priorità sono accompagnati dalle etichette esplicite Alta/Media.
Selezione in batch e annullamento dell’ultimo batch
Gli ID stabili dei record determinano gli insiemi selezionati e archiviati, mentre Toast nativo gestisce la visibilità della notifica.
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();
La larghezza della tabella di 740px è una scelta dell’applicazione per favorire la leggibilità, non un valore predefinito di CoreUI.
04
Configurazione dell’agent per il sistema di design CoreUI
Punto di partenza per l’implementazione
CoreUI verificato per Bootstrap 5.9.0. Il file app.js fornito si aspetta il markup completo della coda e non espone operazioni di rete. Il wrapper HTML include il markup completo del body; salva gli esempi forniti di interazione e di CSS con i nomi file indicati qui.
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>
Un prompt per il tuo progetto
Prompt per l’agente
Parti dalla postazione per le operazioni di revisione del design CoreUI 5.9.0. Mantieni le schede native e la notifica di annullamento usando gli attributi data-coreui, i cinque record di revisione e l’insieme di ID selezionati, con uno stato misto derivato per la selezione multipla. Archivia il batch selezionato, mostralo nella scheda Archivio e consenti ad Annulla di ripristinare l’ultimo batch. Mantieni lo scorrimento orizzontale della tabella al suo interno e distingui la selezione dall’appartenenza all’archivio. Usa il bundle CoreUI corrispondente; non sostituire i nomi degli attributi di Bootstrap né dichiarare che l’archiviazione avviene lato server.
05
Fonti e ambito del sistema di design CoreUI
CoreUI per i componenti gratuiti di Bootstrap 5.9.0. Le impostazioni predefinite del tema e le scelte originali di densità sono indicate separatamente. L’archiviazione e l’annullamento riguardano solo i record di esempio locali.
