# Sistema de diseño Naive UI

## Vista previa de la interfaz del sistema de diseño Naive UI

Busca registros, amplía el contexto de revisión, selecciona filas en distintas páginas y marca como revisado un lote local.

## Referencia de diseño del sistema de diseño Naive UI

Objeto del tema claro común de Naive UI 2.45.3, inspeccionado en el paquete instalado. Estas propiedades en camelCase son personalizaciones del tema, no un esquema público de nombres de variables CSS --token. Las personalizaciones comunes propias de la vista previa se enumeran por separado.

### Colores comunes predeterminados

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| primaryColor | #18a058 | Verde principal predeterminado. |
| primaryColorHover | #36ad6a | Variante al pasar el cursor. |
| primaryColorPressed | #0c7a43 | Variante al presionar. |
| primaryColorSuppl | #36ad6a | Color principal complementario. |
| infoColor | #2080f0 | Rol informativo. |
| successColor | #18a058 | Rol de éxito. |
| warningColor | #f0a020 | Rol de advertencia. |
| errorColor | #d03050 | Rol de error. |
| textColor1 | rgb(31, 34, 37) | Texto en negrita. |
| textColor2 | rgb(51, 54, 57) | Texto normal. |
| textColor3 | rgb(118, 124, 130) | Texto secundario. |
| borderColor | rgb(224, 224, 230) | Borde predeterminado. |
| dividerColor | rgb(239, 239, 245) | Separadores sutiles. |
| tableHeaderColor | rgb(250, 250, 252) | Fondo del encabezado de tabla. |
### Tipografía y dimensiones de los controles

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| fontFamily | v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | Pila de fuentes de interfaz preferida; v-sans no se descarga automáticamente. |
| fontSize | 14px | Tamaño de texto predeterminado de 14px. |
| fontSizeMini | 12px | Tamaño de texto mínimo. |
| fontSizeSmall | 14px | Texto pequeño de control. |
| fontSizeMedium | 14px | Texto mediano de control. |
| fontSizeLarge | 15px | Texto grande de control. |
| fontSizeHuge | 16px | Texto extragrande de control. |
| lineHeight | 1.6 | Interlineado de texto predeterminado. |
| heightTiny | 22px | Altura mínima de control. |
| heightSmall | 28px | Altura de control pequeña. |
| heightMedium | 34px | Altura mediana de control. |
| heightLarge | 40px | Altura de control grande. |
| heightHuge | 46px | Altura extragrande de control. |
| borderRadius | 3px | Radio predeterminado de 3px. |
| borderRadiusSmall | 2px | Radio pequeño predeterminado de 2px. |
### Personalizaciones reales del tema de la vista previa

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| common.primaryColor | #176b57 | Acción principal verde más oscuro, original. |
| common.primaryColorHover | #238a71 | Valor original coordinado al pasar el cursor. |
| common.primaryColorPressed | #115340 | Valor original coordinado al presionar. |
| common.borderRadius | 6px | Personalización original del radio; el valor predeterminado es 3px. |
| Layout spacing | 32px outer / 24px section gaps / 16px toolbar gap | Espaciado de página original, no una escala global de espaciado atribuida a Naive. |
## Guía completa del sistema de diseño Naive UI

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Sistema de diseño Naive UI: un objeto de tema de JavaScript, no una cadena de compilación Sass

### Un objeto de tema de JavaScript, no una cadena de compilación Sass

> Naive UI es una biblioteca de componentes de Vue 3 cuya personalización del tema se expresa mediante un objeto JavaScript. La cola de revisión pasa themeOverrides a NConfigProvider. Su sección common personaliza primaryColor, primaryColorHover, primaryColorPressed y borderRadius, mientras que los demás valores predeterminados de los componentes siguen disponibles a través del proveedor.

La tabla de referencia muestra valores reales del tema claro común de la versión 2.45.3 instalada. No inventa nombres de variables CSS a partir de esas claves camelCase. El color principal predeterminado es #18a058 y el radio predeterminado del borde es de tres píxeles; el verde más oscuro y el radio de seis píxeles de este ejemplo son personalizaciones originales explícitas.

Consulta la especificación complementaria

## Tipografía de interfaz densa y alturas de controles del sistema de diseño Naive UI

### Tipografía de interfaz densa y alturas de controles

El tema común usa texto de catorce píxeles con un interlineado de 1.6. Sus tamaños de texto pequeño y mediano son ambos de catorce píxeles, pero las alturas de sus controles son distintas. heightSmall mide veintiocho píxeles y heightMedium, treinta y cuatro; por tanto, los nombres de tamaño describen las dimensiones de los componentes, no solo una progresión del tamaño de fuente.

La pila de fuentes preferida comienza con v-sans, pero la biblioteca no exige descargar esa fuente para mostrar este ejemplo. La página circundante usa system-ui, un encabezado de 34px y títulos de sección complementarios de 18px. Esos estilos de página son originales. Al adoptar la biblioteca, conviene distinguir la escala de controles del tema de la jerarquía editorial de mayor tamaño de una página de presentación.

Consulta la especificación complementaria

## Las definiciones de columnas del sistema de diseño Naive UI incluyen comportamiento

### Las definiciones de columnas incluyen comportamiento

NDataTable recibe un array de columnas y un array de registros. El ejemplo comienza con una columna de selección, seguida de una columna de expansión y, después, las columnas de datos con nombre. La columna Referencia muestra un nombre destacado y un ID estable en texto más pequeño. Entradas usa un comparador numérico, mientras que la columna de nombre utiliza el criterio de ordenación predeterminado. Revisión muestra un NTag nativo según el estado del registro.

Esta configuración define un comportamiento real, no una captura de pantalla con encabezados de tabla decorativos. Al ordenar la columna Entradas, se comparan cantidades numéricas, no cadenas con formato. El contenido expandido muestra la pregunta de revisión específica de cada registro. La tabla de datos controla cómo se muestran las filas, mientras que la aplicación determina el significado de esos registros.

Consulta la especificación complementaria

## Sistema de diseño Naive UI: la selección debe mantenerse al cambiar el orden

### La selección debe mantenerse al reordenar

La función row-key devuelve el ID estable de cada registro. checked-row-keys y update:checked-row-keys mantienen la selección controlada en el estado de Vue. Ordenar o paginar puede cambiar la posición de un registro sin alterar la identidad que usa la acción por lotes. Usar índices del array en su lugar haría que esta relación fuera frágil al cambiar el orden de las filas.

La columna de selección deshabilita los registros archivados. Estos siguen visibles para aportar contexto histórico, pero no se pueden añadir al lote de revisión. La aplicación también comprueba el estado al aplicar la acción para que la modificación de datos sea coherente con la restricción visible. En un sistema real, el servidor también tendría que aplicar la autorización; una casilla deshabilitada no es un límite de permisos.

1. Selecciona un registro apto para revisión en la primera página.

2. Ve a la página siguiente y comprueba que se conserve el recuento de selecciones.

3. Aplica la acción por lotes y comprueba que cambie el estado del registro seleccionado sin modificar ningún registro archivado.

Consulta la especificación complementaria

## Sistema de diseño Naive UI: el filtrado y la paginación tienen estados independientes

### El filtrado y la paginación tienen estados independientes

El campo de búsqueda busca coincidencias en los nombres de referencia y los responsables. Al cambiar su valor, la página actual vuelve a ser la primera para evitar que los resultados filtrados aparezcan en una página posterior que ahora esté vacía. La paginación utiliza un tamaño de página de cuatro y un controlador onChange; los seis registros permiten observar los cambios de página en el ejemplo local.

La selección es independiente del array filtrado a propósito y puede abarcar varias páginas. El recuento de la barra de herramientas indica ese alcance. Una operación por lotes de producción debería conservar o borrar las selecciones ocultas según una regla deliberada; este ejemplo las conserva. El filtro nunca se trata como una modificación de los registros de revisión subyacentes.

Consulta la especificación complementaria

## Sistema de diseño Naive UI: expande las filas antes de decidir una acción por lotes

### Expande las filas antes de tomar una decisión por lote

Cada fila expandible incluye una tarea concreta, como comprobar el desplazamiento con el teclado en la navegación o comparar distintos significados de estados vacíos. Así, el área expandida aporta información útil para decidir en la revisión, en lugar de repetir otra descripción genérica. La columna de expansión usa renderExpand para generar contenido normal debajo del registro correspondiente.

La tabla conserva la estructura de sus columnas en pantallas estrechas y recibe scroll-x=640. Así, la región nativa de la tabla puede desplazarse horizontalmente mientras la página se mantiene dentro del área visible. La barra de herramientas se apila en móviles, pero los datos no se ocultan para que la captura de pantalla se vea más ordenada.

Consulta la especificación complementaria

## Sistema de diseño Naive UI: la revisión por lotes es una transformación de datos local

### La revisión por lote es una transformación local de datos

El botón Marcar como revisados está deshabilitado cuando el array de claves controladas está vacío. Al activarlo, recorre los registros y cambia a Revisado solo los elementos seleccionados que no estén archivados. Después, se borra la selección y se muestra una alerta de éxito nativa que describe exactamente la operación local. El contador de revisados en el encabezado de la tarjeta se calcula a partir de los registros, en vez de incrementarse por separado.

No se modifica ningún repositorio, servicio de revisión ni documento externo. Una implementación asíncrona real tendría que gestionar los estados de carga, rechazo y fallo parcial. No debería borrar la selección antes de saber qué actualizaciones se completaron correctamente. Este ejemplo mantiene la operación síncrona y explícitamente local para que el mensaje de éxito coincida con el código.

- El botón de acción por lotes refleja si hay claves seleccionadas.

- El recuento de revisados se calcula a partir de los mismos registros que se muestran en la tabla.

- El aviso de resultado indica que no se modificó ningún repositorio.

Consulta la especificación complementaria

## Sistema de diseño Naive UI: un componente Vue sin una importación obligatoria de CSS

### Un componente de Vue sin una importación obligatoria de CSS

Instala naive-ui@2.45.3 en un proyecto de Vue 3 e importa los componentes que utiliza App.vue. Naive UI proporciona los estilos de sus componentes en tiempo de ejecución; a diferencia de muchas bibliotecas que requieren CSS como punto de entrada, no exige importar una hoja de estilos global del paquete para estos componentes. El archivo style.css proporcionado solo contiene el diseño original del área de trabajo.

NConfigProvider recibe los locales en inglés de los componentes y de las fechas, además de la personalización común del tema. El SFC completo se puede compilar con el complemento estándar de Vue para Vite. El ejemplo independiente incluye el componente compilado, de modo que los componentes nativos y el comportamiento de la aplicación estén disponibles sin solicitudes de red.

Consulta la especificación complementaria

## Sistema de diseño Naive UI: los límites del tema y de los datos se pueden inspeccionar

### Los límites entre el tema y los datos son fáciles de inspeccionar

El área de trabajo es una pequeña biblioteca de referencia, no un panel de administración general con métricas inventadas. Cada fila contiene datos de ejemplo, cada estado tiene un significado explícito y el texto expandido ofrece un motivo concreto para inspeccionarla. La tabla del tema y el SFC completo permiten reproducir tanto los estilos como el comportamiento.

Al integrar Naive UI en un sistema más amplio, coordina las personalizaciones comunes globales con las personalizaciones de cada componente. Revisa conjuntamente los colores predeterminados, de hover y de estado presionado para el color principal. Si el proveedor ofrece una interfaz de personalización del tema compatible, evita empezar por aplicar estilos a elementos internos generados.

Consulta la especificación complementaria

## Ejemplos de componentes de Naive UI del sistema de diseño

### Cola de revisión completa en Vue

Configuración de columnas de DataTable, claves de fila estables, selección, expansión y paginación controlada.

```
<script setup>
import {ref,computed,h} from 'vue';
import {NConfigProvider,NDataTable,NButton,NInput,NTag,NAlert,NCard,NSpace,enUS,dateEnUS} from 'naive-ui';
const themeOverrides={common:{primaryColor:'#176b57',primaryColorHover:'#238a71',primaryColorPressed:'#115340',borderRadius:'6px'}};
const rows=ref([{id:'DS-101',name:'Navigation patterns',owner:'Maya',items:18,status:'Needs review',note:'Check keyboard movement between primary and overflow navigation.'},{id:'DS-102',name:'Empty-state copy',owner:'Alex',items:9,status:'Needs review',note:'Compare first-use guidance with filtered-empty and permission-empty states.'},{id:'DS-103',name:'Color role mapping',owner:'Jules',items:24,status:'Reviewed',note:'Semantic aliases were compared in light and dark appearances.'},{id:'DS-104',name:'Form error summary',owner:'Sam',items:12,status:'Needs review',note:'Verify error links focus the corresponding input.'},{id:'DS-105',name:'Legacy icon export',owner:'Maya',items:36,status:'Archived',note:'Historical export retained for reference; batch review is disabled.'},{id:'DS-106',name:'Density variants',owner:'Alex',items:15,status:'Needs review',note:'Check compact controls with long translated labels.'}]);
const query=ref(''),checked=ref([]),page=ref(1),notice=ref('');const filtered=computed(()=>rows.value.filter(r=>(r.name+' '+r.owner).toLowerCase().includes(query.value.toLowerCase())));
const columns=[{type:'selection',disabled:r=>r.status==='Archived'},{type:'expand',renderExpand:r=>h('div',{class:'row-note'},r.note)},{title:'Reference',key:'name',sorter:'default',width:240,render:r=>h('div',[h('strong',r.name),h('div',{class:'row-id'},r.id)])},{title:'Owner',key:'owner',width:100},{title:'Entries',key:'items',sorter:(a,b)=>a.items-b.items,width:95},{title:'Review',key:'status',width:140,render:r=>h(NTag,{type:r.status==='Reviewed'?'success':r.status==='Archived'?'default':'warning',bordered:false},{default:()=>r.status})}];
const pagination=computed(()=>({page:page.value,pageSize:4,onChange:p=>page.value=p}));function apply(){rows.value=rows.value.map(r=>checked.value.includes(r.id)&&r.status!=='Archived'?{...r,status:'Reviewed'}:r);notice.value=`Marked ${checked.value.length} selected references reviewed in this preview. No repository was changed.`;checked.value=[];}
</script>
<template><NConfigProvider :locale="enUS" :date-locale="dateEnUS" :theme-overrides="themeOverrides"><main class="review-desk"><header><p class="eyebrow">NAIVE UI / REFERENCE REVIEW</p><h1>A review queue with context.</h1><p>Search, expand a row, compare entry counts, and apply a local batch action.</p></header><NCard title="Reference library"><template #header-extra><NTag :bordered="false" type="success">{{rows.filter(r=>r.status==='Reviewed').length}} reviewed</NTag></template><div class="toolbar"><NInput v-model:value="query" placeholder="Search reference or owner" clearable aria-label="Search reference or owner" @update:value="page=1"/><NButton type="primary" :disabled="!checked.length" @click="apply">Mark selected reviewed</NButton></div><p class="selection-note">{{checked.length}} selected · Selection uses stable IDs and can span pages.</p><NDataTable :columns="columns" :data="filtered" :row-key="r=>r.id" :checked-row-keys="checked" @update:checked-row-keys="keys=>checked=keys" :pagination="pagination" :scroll-x="640" :single-line="false"/><NAlert v-if="notice" type="success" class="notice">{{notice}}</NAlert></NCard><div class="notes"><section><h2>Expand before judging</h2><p>The expand control reveals a concrete review question for each reference. A title alone is not enough context for a meaningful batch decision.</p></section><section><h2>Archived is a separate state</h2><p>Archived records stay visible but cannot join the batch selection. Search and pagination never change the underlying review data.</p></section></div><footer>Native Naive UI 2.45.3 DataTable, Input, Button, Tag, Card and Alert. All records and mutations are local examples.</footer></main></NConfigProvider></template>
```

Referencia de código

- La selección se basa en los ID de referencia estables.

- El predicado de la columna de selección deshabilita las filas archivadas.

- La personalización común del tema se proporciona mediante NConfigProvider.

### Diseño original del área de trabajo

Tipografía de la página y espaciado adaptable alrededor de la tabla de datos nativa.

```
*{box-sizing:border-box}body{margin:0;background:#f5f7f6;color:#1f2225;font-family:system-ui,sans-serif;font-size:14px;line-height:1.6}.review-desk{max-width:1120px;margin:auto;padding:32px}header{max-width:720px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#426258}.toolbar{display:flex;align-items:center;gap:16px}.toolbar .n-input{max-width:360px}.selection-note,.row-id{font-size:12px;color:#767c82}.row-id{margin-top:4px}.row-note{padding:12px 16px;max-width:65ch;color:#335547}.notice{margin-top:20px}.notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.notes section{border-top:2px solid #c8d7cf;padding:18px 0}.notes h2{font-size:18px;margin:0 0 10px}.notes p{margin:0}footer{font-size:12px;color:#767c82;margin-top:20px}@media(max-width:700px){.review-desk{padding:20px 16px}h1{font-size:28px}.toolbar{align-items:stretch;flex-direction:column}.toolbar .n-input{max-width:none}.notes{grid-template-columns:1fr}.n-card>.n-card__content{padding:16px!important}}
```

Referencia de código

- Naive UI inyecta los estilos de los componentes; esta hoja de estilos solo contiene el diseño de la aplicación.

## Configuración del agente del sistema de diseño Naive UI

### Punto de partida para la implementación

Verificado con Vue 3 y Naive UI 2.45.3. Usa la compilación SFC estándar. Todos los registros de referencia son locales.

```
// Create the project first:
// npm create vite@latest naive-ui-specimen -- --template vue
// cd naive-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install naive-ui@2.45.3
// Save the complete component above as App.vue and layout as style.css.
import {createApp} from 'vue';
import App from './App.vue';
import './style.css';
createApp(App).mount('#app');
// index.html contains <div id="app"></div>.
// NConfigProvider, locales, themeOverrides and component imports are in App.vue.
// No Naive UI global CSS import is required for these components.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Una instrucción para tu proyecto

```
Usa la cola de revisión de referencias de Naive UI 2.45.3 con NConfigProvider y columnas nativas de NDataTable, expansión, ordenación, paginación y selección. Conserva las claves de referencia estables al filtrar o cambiar de página, y asegúrate de que la acción por lotes se aplique a los registros seleccionados, no solo a las filas visibles. Vincula los estados vacíos y las acciones deshabilitadas a la colección real. Mantén los themeOverrides proporcionados como sobrescrituras de la aplicación, diferenciadas de los valores predeterminados del paquete, y conserva el diseño original completo. La cola es para revisar referencias locales, no es un servicio de importación de conjuntos de datos.
```

## Fuentes y alcance del sistema de diseño Naive UI

Naive UI 2.45.3. Los valores predeterminados del tema y las sobrescrituras originales se identifican por separado. Los registros de revisión y los cambios por lotes se mantienen en local.

- Repositorio oficial Vue 3, estilos en tiempo de ejecución y personalización del tema.

- Ejemplos de DataTable Patrones de tablas de datos nativas y ejemplos de API.

- Tema claro común Paleta predeterminada real y roles derivados.

- Geometría común Tamaños de fuente, alturas de controles y radios.

- Proveedor de configuración Configuración del tema del proveedor.

## Recursos relacionados del sistema de diseño Naive UI

### Nuxt UI

Crea un compositor de informes completo con Nuxt UI 4.11.3, componentes reales de Vue, referencias semánticas al tema, validación de entradas y un comportamiento explícito para borradores locales.

### Oruga UI

Un editor de catálogos nativo de Oruga con etiquetas temáticas que se pueden buscar y quitar, límites de vocabulario aplicados, los tokens reales de un tema opcional y una tarjeta dinámica que refleja las etiquetas seleccionadas.

### Pico CSS

Pico CSS aplica estilos a HTML semántico con una escala tipográfica adaptable basada en rem y variables de tema. Sus distribuciones estándar, sin clases y condicionales tienen distintos ámbitos de integración; esta guía usa la compilación estándar para un formulario de preferencias de lectura con comportamiento nativo de divulgación y diálogo.


- [Referencia de implementación](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Fuente](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [Fuente](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)
- [Consulta la especificación complementaria](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [Consulta la especificación complementaria](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Consulta la especificación complementaria](https://github.com/tusen-ai/naive-ui)
- [Consulta la especificación complementaria](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)
- [Referencia de código](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Referencia de código](https://github.com/tusen-ai/naive-ui)
- [Repositorio oficial Vue 3, estilos en tiempo de ejecución y personalización del tema.](https://github.com/tusen-ai/naive-ui)
- [Ejemplos de DataTable Patrones de tablas de datos nativas y ejemplos de API.](https://github.com/tusen-ai/naive-ui/tree/main/src/data-table/demos/enUS)
- [Tema claro común Paleta predeterminada real y roles derivados.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/light.ts)
- [Geometría común Tamaños de fuente, alturas de controles y radios.](https://github.com/tusen-ai/naive-ui/blob/main/src/_styles/common/_common.ts)
- [Proveedor de configuración Configuración del tema del proveedor.](https://github.com/tusen-ai/naive-ui/tree/main/src/config-provider)