Sistema de componentes empresariales · Nuevo recurso
Sistema de diseño de CoreUI.
Una cola de revisión de CoreUI creada con las variables reales del tema 5.9, pestañas nativas, selección múltiple con casillas y una notificación persistente que permite deshacer la última operación de archivado local.
Referencia de diseño del sistema de diseño de CoreUI
Valores predeterminados del tema claro de CoreUI para Bootstrap 5.9.0, obtenidos de la hoja de estilos compilada instalada. Estos nombres --cui-* son variables reales del entorno de ejecución. La aplicación de ejemplo utiliza componentes gratuitos; no presupone el uso de widgets PRO de CoreUI.
Sistema de diseño de CoreUI: elija el entorno de ejecución de CoreUI que realmente utiliza
Elija el entorno de ejecución de CoreUI que realmente utiliza
Este ejemplo usa CoreUI para Bootstrap 5.9.0, el paquete CSS y JavaScript para navegador. CoreUI también dispone de paquetes específicos para frameworks, pero las importaciones de componentes no son intercambiables con los atributos de datos de este ejemplo. La configuración proporciona una hoja de estilos y un script incluidos que son compatibles entre sí, sin presuponer un proveedor de React o Vue.
La mesa de revisión usa tarjetas, tablas, formularios, pestañas y notificaciones toast gratuitas. No sustituye de forma encubierta estos elementos por una cuadrícula de datos PRO o un selector avanzado de pago. Este límite permite reproducir el ejemplo completo a partir del paquete indicado, sin exigir la compra de una plantilla no documentada.
Sistema de diseño de CoreUI: use el color primario morado real y los roles de estado asociados
Use el color primario morado real y los roles de estado asociados
El color primario del tema claro de CoreUI es #5856d6, con contraste blanco para el color primario. La tarjeta del principio de revisión usa conjuntamente primary-bg-subtle, primary-border-subtle y primary-text-emphasis. Estos nombres describen un tratamiento coordinado de la superficie, de modo que el texto complementario no se coloca sobre un fondo teñido con un color de primer plano arbitrario.
Las insignias de prioridad alta y media también combinan superficies suaves de peligro o advertencia con texto de énfasis. Las etiquetas de texto indican la clasificación independientemente del color. Son prioridades de ejemplo para la revisión de diseño, no una afirmación de que todas las insignias rojas de un producto deban representar el mismo estado del dominio.
Sistema de diseño de CoreUI: separe la tipografía predeterminada del texto de una tabla de trabajo densa
Separe la tipografía predeterminada del texto de una tabla de trabajo densa
El cuerpo compilado de CoreUI tiene por defecto un rem y una altura de línea de 1,5. La muestra usa intencionalmente texto de catorce píxeles en la tabla y etiquetas de columna de doce píxeles para facilitar la revisión de una cola densa. Los valores del encabezado de página y del resumen tienen sus propios tamaños originales, más grandes. La guía no presenta incorrectamente esas personalizaciones de la aplicación como valores predeterminados de toda la biblioteca.
Las tres tarjetas de contexto usan la cuadrícula adaptable nativa y el espacio g-3. Bandeja de entrada y Archivados permanecen una al lado de la otra en pantallas pequeñas, mientras que la tercera tarjeta explicativa ocupa una fila completa. Todos los números se derivan de los cinco registros de ejemplo visibles; no hay métricas de panel ajenas al contexto ni gráficos de crecimiento inventados.
Atributos de datos del sistema de diseño CoreUI para controlar paneles de pestañas reales
Los atributos de datos de CoreUI controlan paneles de pestañas reales
Bandeja de entrada y Archivo son pestañas basadas en botones, con data-coreui-toggle="tab" y destinos que corresponden a los paneles de pestañas. El marcado incluye las relaciones tablist, tab, tabpanel, aria-controls y aria-labelledby. El componente CoreUI JavaScript actualiza el estado activo y la visibilidad, en lugar de limitarse a cambiar un subrayado mediante un controlador de la aplicación.
La clase nav-underline-border proporciona el tratamiento visual de este componente. Cambiar de pestaña no archiva registros ni borra una selección. La pestaña controla qué parte de la cola local se muestra, mientras que los Set de elementos seleccionados y archivados de la aplicación mantienen estados independientes.
El estado mixto de la selección total tiene sentido en el sistema de diseño CoreUI
La selección de todo ofrece un estado mixto significativo
Cada nota usa un ID estable de la serie R. Al marcar una fila, se añade ese ID a un Set de elementos seleccionados. La casilla de encabezado aparece marcada solo cuando están seleccionados todos los registros actuales de la bandeja de entrada; aparece en estado indeterminado cuando solo se han seleccionado algunos, y deshabilitada cuando la bandeja está vacía. Estos estados se recalculan cada vez que se representa la cola.
El botón de acción por lotes está deshabilitado cuando no hay nada seleccionado, y el texto contiguo indica el recuento actual. La selección se borra después de archivar para que un registro ya archivado no permanezca por error en el siguiente lote. La nota original y su responsable siguen vinculados al registro, en vez de sustituirse por una etiqueta genérica de «Resuelto».
Selecciona dos notas y comprueba el estado mixto de la casilla de encabezado.
Archiva la selección y confirma que el recuento de la bandeja de entrada disminuya en dos.
Abre Archivo para consultar las solicitudes originales y sus responsables.
Un aviso emergente del sistema de diseño CoreUI presenta una operación reversible concreta
Una notificación toast presenta una operación específica y reversible
La aplicación registra los ID exactos del lote archivado más reciente y, a continuación, llama al método show de la instancia nativa de Toast. autohide está desactivado porque el aviso incluye una acción para deshacer; el ejemplo no elimina esta posibilidad tras un temporizador breve arbitrario. El aviso puede cerrarse de forma explícita.
Deshacer elimina del Set de elementos archivados solo los ID guardados, borra la instantánea del último lote y deshabilita su acción. Si se deshace un lote posterior, un lote archivado anteriormente permanece archivado. Esta operación intencionalmente permite deshacer un solo nivel; no pretende ofrecer un historial completo de deshacer.
Mantén legible la solicitud después de archivarla con el sistema de diseño CoreUI
Mantenga la solicitud legible después de archivarla
La tabla de la bandeja de entrada muestra el título de la nota, el cambio solicitado concreto, el área, la prioridad y el responsable. Archivo muestra una lista compacta que conserva el título, el ID, el responsable y la solicitud completa. Tras resolverla, reduce los elementos visuales de la tabla sin eliminar la información necesaria para entender qué se cambió.
En dispositivos móviles, la tabla conserva un ancho mínimo de 740px dentro de table-responsive. La región identificada se puede enfocar con el teclado y tiene un indicador de foco visible; el desplazamiento horizontal se mantiene dentro de la tabla, en lugar de ampliar el documento. Eliminar columnas importantes solo para evitar una barra de desplazamiento dificultaría esta tarea de revisión.
Usa un resultado persistente sin inventar un backend con el sistema de diseño CoreUI
Use un resultado persistente sin inventar un backend
El aviso emergente tiene un rol de estado cortés y un anuncio atómico. Un segundo estado integrado describe el resultado local de archivar o deshacer. Ninguno afirma que se haya cerrado una incidencia externa: la página indica explícitamente que no está conectada a un sistema de seguimiento de incidencias. La vista previa solo modifica sus Set en memoria, por lo que al recargar se restauran las cinco notas originales.
Los títulos y las descripciones de los registros se insertan con textContent, incluida la lista de Archivo. Las asignaciones de clases fijas representan las dos prioridades conocidas. Así, el texto similar al proporcionado por usuarios se mantiene separado de la estructura de HTML y se puede inspeccionar el flujo de datos del ejemplo.
Describe el tamaño real del lote y su alcance local.
Mantén disponible el botón para deshacer mientras la instantánea siga siendo válida.
No presentes una actualización local del DOM como una resolución remota exitosa.
Carga el paquete de CoreUI antes del módulo local en el sistema de diseño CoreUI
Cargue el paquete de CoreUI antes del módulo local
La configuración completa copia los recursos de dist del paquete en una ruta pública local y carga coreui.bundle.min.js antes de app.js. El paquete expone coreui.Toast y proporciona el comportamiento de pestañas para los atributos data-coreui. No es necesario añadir un segundo entorno de ejecución de Bootstrap para esta composición, y hacerlo podría generar una duplicación confusa de responsabilidades.
El tema claro se especifica explícitamente mediante data-coreui-theme="light". Una aplicación más grande puede adoptar el mecanismo de modo de color de CoreUI, pero debería revisar conjuntamente los pares semánticos de texto y superficie. La verificación local abarcó la selección parcial, un lote de dos registros, la consulta de la pestaña Archivo, la restauración al deshacer y una ventana gráfica de 390px.
Usa los atributos data-coreui-* con este paquete, no los data-bs-* copiados de otra biblioteca.
La tabla tiene una región de desplazamiento horizontal local e identificada.
Los colores de prioridad se acompañan de las etiquetas explícitas Alto/Medio.
Selección por lotes y opción para deshacer el último lote
Los ID estables de los registros determinan los Set de elementos seleccionados y archivados, mientras que Toast, el componente nativo, controla la visibilidad del aviso.
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();
El ancho de tabla de 740px es una decisión de legibilidad de la aplicación, no un valor predeterminado de CoreUI.
04
Configuración del agente del sistema de diseño CoreUI
Punto de partida para la implementación
Verificado CoreUI para Bootstrap 5.9.0. El app.js proporcionado espera el marcado completo de la cola y no expone ninguna operación de red. El contenedor HTML incluye todo el marcado del cuerpo; guarda los ejemplos proporcionados de interacción y CSS con los nombres de archivo que se indican aquí.
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>
Una instrucción para tu proyecto
Instrucción para el agente
Parte del escritorio de operaciones de revisión de CoreUI 5.9.0. Conserva las pestañas nativas y la notificación para deshacer mediante atributos data-coreui, los cinco registros de revisión y el conjunto de ID seleccionados, con un estado mixto derivado para la selección en bloque. Archiva el lote seleccionado, muéstralo en la pestaña de archivados y permite deshacer para restaurar el último lote. Mantén contenido el desplazamiento horizontal de la tabla y distingue la selección de la pertenencia al archivo. Usa el paquete de CoreUI correspondiente; no sustituyas nombres de atributos de Bootstrap ni afirmes que el archivado se realiza en el servidor.
05
Fuentes y alcance del sistema de diseño de CoreUI
CoreUI para los componentes gratuitos de Bootstrap 5.9.0. Se distinguen los valores predeterminados del tema y las elecciones originales de densidad. El archivado y la acción de deshacer solo afectan a los registros de ejemplo locales.
