Sistema de componentes sin estilos · Nuevo recurso
Sistema de diseño 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.
Referencia de diseño del sistema de diseño Oruga UI
Paquete Oruga para Vue 3, versión 0.14.4, con @oruga-ui/theme-oruga 0.10.0. Los valores siguientes pertenecen a ese tema predeterminado opcional, no a un núcleo headless inmutable. Los iconos MDI 7.4.47 se incluyen localmente. La composición del catálogo y las ilustraciones de carpetas que la rodean son originales.
Separa el comportamiento de los componentes de Oruga de su tema opcional — Sistema de diseño Oruga UI
Separa el comportamiento de los componentes de Oruga de su tema opcional
Oruga proporciona componentes de Vue sin exigir un marco de CSS específico. Este ejemplo combina el paquete para Vue 3 con el tema predeterminado de Oruga, que se distribuye por separado. Las etiquetas verdes seleccionadas y los campos delineados provienen de ese tema, mientras que la búsqueda, la selección y la eliminación son comportamientos nativos de los componentes.
Este límite resulta útil al evaluar la biblioteca. Un equipo puede conservar los componentes API y sustituir la configuración de clases o elegir otro tema compatible. Por eso, la tabla de referencia indica el paquete y la versión del tema, en lugar de presentar su color primario verde como un requisito universal para todas las aplicaciones Oruga.
Usa las variables reales del tema predeterminado — Sistema de diseño Oruga UI
Usa las variables reales del tema predeterminado
El tema opcional instalado define --oruga-primary como #445e00 y --oruga-primary-invert como white. El color de peligro es #b60000 y los bordes de los controles usan #dbdbdb. La propiedad variant del componente selecciona la familia semántica adecuada, sin necesidad de una regla CSS independiente para cada campo o etiqueta.
El mismo tema define un radio estándar de cuatro píxeles, una altura de control de 2.25em y fórmulas de relleno que restan el borde de un píxel. Como estos valores son relativos al texto del control, cambiar la escala tipográfica afecta a la geometría. El espaciador de medio em del tema expresa una relación entre componentes, no demuestra que exista una escala completa de espaciado para la maquetación de páginas.
Proporciona la estructura que Oruga deliberadamente no impone — Sistema de diseño Oruga UI
Proporciona la estructura que Oruga deliberadamente no impone
El catálogo usa una columna flexible para el editor y otra de 330px para la tarjeta; ambas se apilan por debajo de 760px. El título de la página usa una fuente sans del sistema, mientras que el de la tarjeta usa Georgia para evocar una ficha editorial. Ambas son decisiones originales y no requieren archivos de fuentes externos.
Oruga no prescribe una cuadrícula ni un framework de utilidades. Por eso, la hoja de estilos completa deja a la vista el relleno de los paneles, los márgenes interiores en pantallas estrechas y las reglas de ajuste de línea. El contador de etiquetas mantiene juntos el numerador y el denominador, y el título de la tarjeta permite que los nombres largos de las notas se ajusten a varias líneas en lugar de ensanchar la página incrustada.
Sistema de diseño Oruga UI: mantener separados los valores seleccionados y la consulta de búsqueda
Mantén los valores seleccionados separados de la consulta de búsqueda
OTaginput enlaza la matriz de temas seleccionados mediante v-model. El texto de autocompletado interno filtra las etiquetas candidatas sin reemplazar esa matriz. El vocabulario incluye seis temas originales con definiciones concretas, y la tarjeta en vivo muestra las definiciones solo de los temas seleccionados.
La comparación de búsqueda predeterminada no distingue entre mayúsculas y minúsculas. La prueba local escribió Color y esperó a que terminara el filtrado antes de seleccionar la opción resultante. Una aserción inmediata durante la espera de la entrada debida a la función debounce daría a entender erróneamente que el filtrado falló. Después de seleccionar una opción, la consulta se borra y se conservan las etiquetas elegidas previamente.
Busca Color y selecciona la opción correspondiente.
Añade Forms para llegar a tres temas junto con Navigation.
Elimina una etiqueta, confirma que la tarjeta cambia y elige un reemplazo antes de guardar.
Sistema de diseño Oruga UI: controlar el vocabulario, los duplicados y el recuento por separado
Controla de forma independiente el vocabulario, los duplicados y el recuento
allow-new=false impide que una frase escrita arbitrariamente se convierta en una etiqueta. allow-duplicates=false impide añadir dos veces la misma etiqueta existente. maxitems=3 limita el total de selecciones y muestra el contador. Cada ajuste protege un aspecto distinto de un vocabulario controlado.
La aplicación sigue comprobando que se haya seleccionado al menos un tema al intentar guardar. El límite máximo de selecciones no implica que haya un mínimo obligatorio. También comprueba que el título, una vez eliminado el espacio sobrante, tenga cinco caracteres significativos; el atributo maxlength del campo de entrada nativo limita el máximo a ochenta caracteres.
Sistema de diseño Oruga UI: usar OField para las etiquetas y los mensajes de validación específicos
Usa OField para las etiquetas y los mensajes de validación específicos
OField proporciona las etiquetas visibles Note title y Topics, así como sus mensajes. Tras guardar con datos no válidos, el campo pertinente recibe la variante danger y un mensaje concreto que indica cómo corregirlo. La indicación sobre los temas explica el rango disponible y la restricción del vocabulario antes de que se produzca un error.
El menú desplegable nativo de entrada de etiquetas sigue el patrón de cuadro combinado/lista. En esta versión, el rol de cuadro combinado pertenece a un contenedor y el campo de texto editable está anidado en su interior. Por eso, la prueba de control de calidad completa el campo Search topics real, en lugar de suponer que el elemento con el rol de cuadro combinado es en sí mismo un campo de entrada.
Sistema de diseño Oruga UI: el paquete de iconos predeterminado también necesita su archivo de fuente
Incluso un paquete de iconos predeterminado necesita el archivo de fuentes
El control para quitar etiquetas usa el paquete de iconos MDI predeterminado de Oruga. Cargar el tema de componentes no carga automáticamente esa fuente, así que la configuración completa incluye @mdi/font. La vista previa independiente conserva un recurso WOFF2 local y las reglas de iconos necesarias, sin depender de una fuente remota.
La acción para quitar una etiqueta sigue siendo un botón real con la etiqueta accesible Remove topic. La ilustración decorativa de la carpeta no está relacionada con esos iconos de control y se oculta a las tecnologías de asistencia. Esta distinción evita que se confunda un elemento ornamental con un control interactivo.
Sistema de diseño Oruga UI: invalidar una instantánea guardada cuando cambian sus datos de entrada
Invalida una instantánea guardada cuando cambien sus datos de entrada
La acción Save registra una frase que indica el título sin espacios sobrantes y el número de temas seleccionados. Un observador supervisa tanto el título como la matriz de temas en profundidad; por eso, quitar un elemento borra la confirmación igual que cambiar el título. Save solo se desactiva mientras la instantánea actual siga guardada.
Clear note restablece el título, todos los temas seleccionados, el estado de validación intentada y el estado de guardado. La tarjeta muestra entonces Untitled research note y No topics selected. El usuario puede ver el ciclo completo de estado vacío, edición y guardado sin que el botón oculte una operación de backend, carga o publicación.
Conserva el modelo de matriz de selección mientras cambia la consulta.
Borra la confirmación de guardado cuando se modifica la matriz anidada.
Describe el resultado como estado local, no como publicación.
Sistema de diseño Oruga UI: importar componentes de forma explícita con el registro actual de Oruga
Importa los componentes explícitamente con el registro actual de Oruga
La configuración verificada de la versión 0.14.4 crea una instancia de Oruga y la instala en la aplicación Vue. App.vue importa explícitamente OField, OInput, OTaginput, OTag y OButton. Este enfoque sigue el modelo de registro actual; basarse en ejemplos antiguos que suponían que todos los componentes estaban registrados globalmente puede dejar incompleta una aplicación.
El README del tema indica que este tema predeterminado usa los nombres de clase existentes de Oruga y necesita su hoja de estilos, sin un objeto adicional de configuración del tema. El punto de entrada importa esa hoja de estilos, el recurso MDI y el diseño original en ese orden. Los ejemplos de código fuente completos anteriores y la raíz de Vite de abajo incluyen todos los elementos necesarios.
Oruga UI Ejemplos de componentes del sistema de diseño
SFC completo del catálogo de temas
OTaginput, OField, OInput, OTag y OButton conectan un vocabulario restringido con una tarjeta de catálogo en vivo.
vue
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
Oruga no exige un sistema de cuadrícula; este diseño está definido explícitamente por la aplicación CSS.
El texto del contador permanece en una sola línea en pantallas estrechas.
04
Oruga UI Configuración del agente de IA del sistema de diseño
Punto de partida para la implementación
Oruga 0.14.4, tema predeterminado opcional 0.10.0 y MDI 7.4.47 verificados. Los componentes se importan explícitamente; el tema predeterminado no requiere configuración adicional del tema JavaScript.
javascript
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/[email protected] @oruga-ui/[email protected] @mdi/[email protected]
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Empieza con el catálogo de notas de investigación de Oruga 0.14.4 y su tema 0.10.0. Conserva la selección controlada de OTaginput a partir del vocabulario de seis temas, la búsqueda que no distingue entre mayúsculas y minúsculas, las etiquetas nuevas y duplicadas desactivadas y el máximo de tres etiquetas. Mantén conectadas las definiciones de temas en vivo y la validación del título con la instantánea guardada, y borra la confirmación de guardado tras cualquier cambio. Incluye createOruga, el tema CSS y la configuración del recurso MDI local. Restablece el estado a un borrador vacío; no inventes datos de comparación de productos ni una actualización remota del catálogo.
05
Oruga UI Fuentes y alcance del sistema de diseño
Oruga 0.14.4 con el tema predeterminado opcional 0.10.0. Vocabulario original e ilustración de catálogo. Guarda los cambios solo en el estado local de la página, sin subirlos, publicarlos ni conservarlos al recargarla.
