# Sistema de diseño de Element Plus ## Vista previa de la interfaz del sistema de diseño Element Plus Filtra y mueve módulos entre dos listas de transferencia nativas, inspecciona las claves seleccionadas y aplica una selección local. ## Referencia de diseño del sistema de diseño Element Plus Element Plus 2.14.7 CSS compilado predeterminado. Las variables son valores verificados del paquete, incluidos los alias semánticos. La composición adaptable de la lista de transferencia sigue las reglas originales de diseño y está separada de los fundamentos del sistema. ### Colores principales y de estado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --el-color-primary | #409eff | Acento principal predeterminado. | | --el-color-primary-light-3 | #79bbff | Tinte principal utilizado en interacciones más claras. | | --el-color-primary-light-5 | #a0cfff | Tinte intermedio. | | --el-color-primary-light-7 | #c6e2ff | Tinte claro. | | --el-color-primary-light-9 | #ecf5ff | Fondo discreto del panel de selección y claves. | | --el-color-primary-dark-2 | #337ecc | Estado principal más oscuro. | | --el-color-success | #67c23a | Rol de éxito. | | --el-color-warning | #e6a23c | Rol de advertencia. | | --el-color-danger | #f56c6c | Rol de error o peligro. | | --el-color-info | #909399 | Rol neutro informativo. | ### Texto semántico y superficies | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --el-text-color-primary | #303133 | Texto principal de lectura. | | --el-text-color-regular | #606266 | Texto habitual de los componentes. | | --el-text-color-secondary | #909399 | Ayuda y metadatos. | | --el-text-color-placeholder | #a8abb2 | Rol del texto de marcador de posición. | | --el-bg-color | #fff | Superficie predeterminada. | | --el-bg-color-page | #f2f3f5 | Fondo de página. | | --el-bg-color-overlay | #fff | Superficie superpuesta. | | --el-border-color | #dcdfe6 | Borde predeterminado. | | --el-border-color-light | #e4e7ed | Borde sutil de tarjeta o resumen. | ### Tipografía, controles y formas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | Preferencia de familia predeterminada. | | --el-font-size-extra-large | 20px | Escala de título de 20 px. | | --el-font-size-large | 18px | Escala de 18 px. | | --el-font-size-medium | 16px | Escala de 16 px. | | --el-font-size-base | 14px | Tamaño base de 14 px. | | --el-font-size-small | 13px | Escala de 13 px. | | --el-font-size-extra-small | 12px | Escala de 12 px. | | --el-border-radius-base | 4px | Esquina estándar de componente. | | --el-border-radius-small | 2px | Esquina pequeña. | | --el-component-size-large | 40px | Altura de control grande. | | --el-component-size | 32px | Altura de control predeterminada. | | --el-component-size-small | 24px | Altura de control pequeña. | ### Diseño original del espacio de trabajo de módulos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Desktop panel arrangement | two panels with 180px reserved between | Adaptación original en torno a Transfer nativo. | | Narrow layout | ≤700px: stacked panels | Punto de ruptura original, no un token de Element Plus. | | Page spacing | 32px desktop; 20px 16px mobile | Relleno exterior original. | | Summary spacing | 24px padding / 24px gap | Composición original del panel de claves seleccionadas y resumen de módulos. | ## Guía completa del sistema de diseño Element Plus 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 Element Plus: una lista de transferencia tiene dos tipos de selección ### Una lista de transferencia tiene dos tipos de selección > Element Plus Transfer muestra listas de elementos disponibles y de destino, con controles para mover los elementos marcados. El espacio de trabajo de módulos utiliza el componente Vue real de la versión 2.14.7. Su v-model contiene las claves de destino, inicialmente catalog y tokens. Una casilla dentro de una lista marca un elemento para la siguiente acción de transferencia; no significa que el elemento ya pertenezca al destino. La lectura del modelo en vivo deja clara esta distinción. Marcar un elemento de origen lo prepara para añadirlo. Al pulsar Añadir, cambia la matriz de claves de destino, se actualiza el resumen de módulos seleccionados y se borra cualquier resultado aplicado anteriormente. Así, quien lo consulta puede ver el contrato del modelo de la biblioteca, en lugar de tener que deducirlo a partir de dos listas estáticas. Consulta la especificación complementaria ## Roles predeterminados y dimensiones concretas de los componentes del sistema de diseño Element Plus ### Roles predeterminados y dimensiones concretas de los componentes Element Plus expone --el-color-primary y sus derivados claros y oscuros, roles de estado, colores de texto y variables de superficie. La tabla muestra los valores compilados reales del paquete instalado. El panel de claves que lo rodea usa primary-light-9 y texto normal, mientras que el botón de acción aplica el estilo principal nativo. La tipografía predeterminada incluye un tamaño base de catorce píxeles y tamaños complementarios de doce, trece, dieciséis, dieciocho y veinte píxeles. Las variables de tamaño de los componentes describen las dimensiones pequeñas, predeterminadas y grandes de los controles. No deben confundirse con una escala de espaciado para el diseño de página. Los espacios de veinticuatro píxeles y el relleno exterior de treinta y dos píxeles del espacio de trabajo son decisiones explícitas de composición original. Consulta la especificación complementaria ## Claves estables, etiquetas y opciones deshabilitadas del sistema de diseño Element Plus ### Claves estables, etiquetas y opciones deshabilitadas Cada opción tiene una clave, una etiqueta y una marca de deshabilitada. El arreglo de elementos seleccionados contiene esas claves, lo que permite cambiar las etiquetas sin alterar la identidad. Los módulos de ejemplo incluyen Catálogo de recursos, Inspector de tokens, Cola de revisión, Historial de versiones y Búsqueda entre proyectos. La exportación de auditoría permanece deshabilitada para mostrar una opción visible, pero no disponible. La disponibilidad de este ejemplo es información de demostración estática. No es una comprobación de derechos ni una promesa de que estos módulos existan como productos instalables. En una aplicación real, el origen de las opciones y las reglas de permisos deben proceder del modelo del producto. No infieras que existe autorización porque se pueda hacer clic en una casilla de Transfer. Consulta la especificación complementaria ## Element Plus El sistema de diseño: la búsqueda cambia la visibilidad, no la pertenencia ### La búsqueda cambia la visibilidad, no la pertenencia filterable añade búsquedas independientes a los paneles. El texto de marcador de posición indica una acción concreta: Buscar un módulo. De forma predeterminada, el filtrado busca coincidencias en la etiqueta de la opción. Un elemento seleccionado puede desaparecer de la lista de destino visible al aplicar una búsqueda sin que se elimine del arreglo de claves seleccionadas; el resumen y la lectura de datos siguen mostrando el conjunto completo de elementos de destino. Los espacios personalizados left-empty y right-empty permiten distinguir entre un panel sin opciones coincidentes y el caso global en que no hay nada seleccionado. La página también deshabilita localmente Aplicar cuando el arreglo de destino está vacío. Son estados distintos: que no haya resultados de búsqueda no significa que no haya módulos seleccionados. 1. Busca Cola de revisión en el panel de módulos disponibles. 2. Marca la opción coincidente y pulsa Añadir. 3. Borra la búsqueda y comprueba que «Cola de revisión» aparezca en la lectura del modelo y en la lista de destino. Consulta la especificación complementaria ## Element Plus El sistema de diseño: conserva en móvil la relación entre las dos listas ### Conserva en móvil la relación entre las dos listas En escritorio, los paneles nativos de Transfer se disponen uno junto al otro, con un área dedicada a Añadir y Quitar. En pantallas de hasta setecientos píxeles de ancho, los paneles se apilan y los botones de acción forman una fila horizontal entre ellos. Los títulos siguen identificando los Módulos disponibles y los Módulos del espacio de trabajo, para que la dirección de cada movimiento quede clara. El entorno de trabajo no reduce todo el control para que quepa en el teléfono. Adapta la composición y mantiene las etiquetas, las casillas, las búsquedas y el contenido de las listas en tamaños nativos y legibles. La lectura de las claves seleccionadas y el resumen textual pasan a una sola columna debajo, conservando la misma información en lugar de ocultarla en un punto de ruptura más pequeño. Consulta la especificación complementaria ## Element Plus El sistema de diseño: borrador de pertenencia y copia del estado aplicado ### Pertenencia en borrador e instantánea aplicada Aplicar localmente copia el arreglo de claves seleccionadas. Un cambio posterior en la selección de Transfer borra ese estado aplicado, de modo que la alerta de éxito no permanece después de que el usuario cambie los elementos del borrador. Restaurar conjunto inicial asigna un nuevo arreglo catalog/tokens y también borra el resultado aplicado. Las transiciones de estado se implementan en unas pocas líneas explícitas del código fuente de Vue. La alerta solo indica que se aplicó la selección de la vista previa local. No afirma que se haya instalado nada, que hayan cambiado los derechos ni que se haya actualizado un sistema externo. En una pantalla de configuración real, la copia del estado aplicado tendría que corresponder a un resultado de persistencia confirmado; un evento del componente por sí solo no confirma nada en el servidor. Consulta la especificación complementaria ## Element Plus El sistema de diseño: controles nativos e instrucciones claras ### Controles nativos e instrucciones claras El ejemplo conserva las casillas y los botones de transferencia nativos de Transfer. El texto de los botones es Quitar y Añadir, en lugar de dejar solo iconos direccionales; esto resulta especialmente útil cuando las listas se apilan en vertical. Los títulos de los paneles explican las funciones de origen y destino, y la frase de ayuda describe la secuencia de marcar y luego mover. La opción deshabilitada permanece en contexto, y los espacios vacíos de los paneles indican que no hay opciones coincidentes. Los usuarios de teclado deben poder acceder a los campos de búsqueda, las casillas y los botones sin manejadores personalizados exclusivos del puntero. El componente gestiona su propio comportamiento interno; la aplicación evita reemplazar esa estructura con filas dibujadas que solo parecen controles de selección. - Los títulos de los paneles indican qué lista es el destino. - Las etiquetas de texto mantienen clara la dirección de la transferencia en la disposición apilada. - La lectura del modelo en tiempo real permite detectar elementos seleccionados que no están visibles. Consulta la especificación complementaria ## Element Plus El sistema de diseño: compila el componente de Vue y carga CSS ### Compila el componente de Vue y carga CSS En un proyecto de Vue 3 con Vite, instala element-plus@2.14.7 e importa element-plus/dist/index.css antes del CSS de la estructura original. El archivo App.vue completo usa script setup e importa sus componentes directamente. ElConfigProvider recibe la configuración regional en inglés para que los textos integrados de los paneles y de los estados vacíos coincidan con la página de referencia en inglés. La configuración de estilo de producción proporcionada importa App.vue mediante el complemento de Vue para Vite. La muestra sin conexión se creó compilando el mismo componente de archivo único y empaquetándolo localmente. No necesita una CDN externa, un servicio de importación automática ni un compilador de plantillas en tiempo de ejecución. Si un proyecto existente usa un complemento de importación automática, mantén los estilos generados en consonancia con la estrategia elegida: importación completa o por componente. Consulta la especificación complementaria ## Element Plus El sistema de diseño: las personalizaciones del tema deben conservar las relaciones entre componentes ### Las anulaciones del tema deben conservar las relaciones entre componentes Las propiedades personalizadas de CSS son útiles para cambiar funciones compartidas sin reescribir los selectores de cada componente. El entorno de trabajo utiliza las variables --el reales para el fondo, el texto, los bordes y las esquinas. Solo modifica los selectores de disposición necesarios para adaptar Transfer nativo a esta composición concreta. Para un tema de marca más amplio, usa el enfoque documentado de Sass o de variables CSS y revisa conjuntamente los estados de pasar el cursor, deshabilitado y foco. Sustituir únicamente el valor hexadecimal principal en una captura de pantalla no contempla sus superficies más claras ni sus interacciones más oscuras. La tabla basada en el código fuente ofrece los valores iniciales; la vista previa nativa completa permite examinar sus efectos en un componente funcional. Consulta la especificación complementaria ## Element Plus El sistema de diseño: ejemplos de componentes ### Componente Vue completo para seleccionar módulos Componente de archivo único que utiliza Transfer, Card, Alert, Button y Tag nativos. ``` ``` Referencia de código - v-model almacena claves seleccionadas, no objetos de opción completos. - Una opción deshabilitada permanece visible, pero no se puede transferir. - Al cambiar la selección de Transfer, se borra el estado aplicado obsoleto. ### Composición adaptable de Transfer Los estilos conservan los paneles y controles nativos, apilándolos en pantallas estrechas. ``` body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}} ``` Referencia de código - El punto de interrupción y la composición circundante son decisiones originales. ## Configuración del agente del sistema de diseño de Element Plus ### Punto de partida para la implementación Verificado con Vue 3 y Element Plus 2.14.7. App.vue proporciona el ConfigProvider en inglés y las importaciones explícitas de componentes. Todo el estado es local. ``` // Create the project first: // npm create vite@latest element-plus-specimen -- --template vue // cd element-plus-specimen && npm install // In a Vite Vue 3 project: // npm install element-plus@2.14.7 // Save the complete single-file component above as App.vue. // main.js import {createApp} from 'vue'; import 'element-plus/dist/index.css'; import './style.css'; import App from './App.vue'; createApp(App).mount('#app'); // index.html:
// style.css: use the complete responsive composition above. // Vite's standard Vue template includes @vitejs/plugin-vue for .vue files. // Keep the template index.html and replace its entry with the code above. // npm run dev ``` ### Una instrucción para tu proyecto ``` Amplía el selector de módulos del espacio de trabajo de Element Plus 2.14.7 proporcionado mediante el ElTransfer nativo. Conserva los seis módulos con clave, la entrada Audit deshabilitada, el comportamiento del filtro y el array controlado de claves seleccionadas. Al aplicar, se debe guardar la selección actual de módulos; las ediciones posteriores deben hacer que esa instantánea aparezca visiblemente desactualizada, mientras que restaurar devuelve la selección inicial. Conserva la composición adaptable de dos paneles y la semántica de los elementos deshabilitados, en lugar de reconstruir Transfer como listas independientes. Carga la hoja de estilos nativa antes de la composición original CSS. ``` ## Fuentes y alcance del sistema de diseño de Element Plus Referencia nativa de Element Plus 2.14.7. Los nombres de los módulos y los permisos son ejemplos originales; la selección local no instala nada ni modifica las autorizaciones. - Transfer Modela las claves, el filtrado, los datos deshabilitados y los slots vacíos. - Tematización Variables de CSS y personalización de Sass. - Inicio rápido Configuración del componente de Vue y de la hoja de estilos. - Config Provider Configuración regional. - Color Roles de color predeterminados. - Borde Fundamentos de bordes y formas. ## Recursos relacionados con el sistema de diseño de Element Plus ### Flowbite Una composición con acordeón y panel lateral nativos de Flowbite 4, con alias semánticos del tema verificados, una lista de equipaje persistente y un flujo accesible para añadir notas sobre materiales de forma local. ### Fomantic UI Un estante de lectura nativo de Fomantic UI con valores compilados del tema verificados, módulos jQuery para menús desplegables y valoraciones, compatibilidad explícita con el teclado y una lista de selección local persistente. ### Foundation Un espacio de trabajo funcional de comprobación de Foundation que utiliza XY Grid, validadores personalizados de Abide, confirmación de Reveal, ajustes Sass reales y código completo de integración local. - [Referencia de implementación](https://element-plus.org/en-US/component/transfer.html) - [Fuente](https://element-plus.org/en-US/guide/theming.html) - [Fuente](https://element-plus.org/en-US/component/transfer.html) - [Consulta la especificación complementaria](https://element-plus.org/en-US/component/transfer.html) - [Consulta la especificación complementaria](https://element-plus.org/en-US/guide/theming.html) - [Consulta la especificación complementaria](https://element-plus.org/en-US/guide/quickstart.html) - [Referencia de código](https://element-plus.org/en-US/component/transfer.html) - [Referencia de código](https://element-plus.org/en-US/guide/theming.html) - [Transfer Modela las claves, el filtrado, los datos deshabilitados y los slots vacíos.](https://element-plus.org/en-US/component/transfer.html) - [Tematización Variables de CSS y personalización de Sass.](https://element-plus.org/en-US/guide/theming.html) - [Inicio rápido Configuración del componente de Vue y de la hoja de estilos.](https://element-plus.org/en-US/guide/quickstart.html) - [Config Provider Configuración regional.](https://element-plus.org/en-US/component/config-provider.html) - [Color Roles de color predeterminados.](https://element-plus.org/en-US/component/color.html) - [Borde Fundamentos de bordes y formas.](https://element-plus.org/en-US/component/border.html)