Sistema di componenti senza interfaccia · Nuova risorsa
Sistema di design Oruga UI.
Un editor di catalogo nativo Oruga con tag di argomenti ricercabili e rimovibili, limiti lessicali applicati, token effettivi di un tema opzionale e una scheda dal vivo che riflette le etichette selezionate.
Sistema di design Oruga UI Riferimento di design del sistema
Pacchetto Oruga per Vue 3 0.14.4 con @oruga-ui/theme-oruga 0.10.0. I valori riportati di seguito appartengono a quel tema predefinito facoltativo, non a un core headless immutabile. Le icone MDI 7.4.47 sono fornite localmente. La composizione del catalogo circostante e le illustrazioni delle cartelle sono originali.
Sistema di design Oruga UI Separa il comportamento dei componenti di Oruga dal suo tema facoltativo
Separa il comportamento dei componenti di Oruga dal tema facoltativo
Oruga fornisce componenti Vue senza imporre un particolare framework CSS. Questo esempio abbina il pacchetto Vue 3 al tema predefinito separato di Oruga. I tag verdi selezionati e i campi con bordo sono forniti da quel tema, mentre ricerca, selezione e rimozione sono comportamenti nativi dei componenti.
Questa distinzione è utile per valutare la libreria. Un team può mantenere i componenti API e sostituire la configurazione delle classi o scegliere un altro tema supportato. Per questo la tabella di riferimento indica il pacchetto del tema e la relativa versione, invece di descrivere il verde del colore primario come un requisito universale di tutte le applicazioni Oruga.
Sistema di design Oruga UI Usa le variabili effettive del tema predefinito
Usa le variabili effettive del tema predefinito
Il tema facoltativo installato definisce --oruga-primary come #445e00 e --oruga-primary-invert come white. Il colore di pericolo è #b60000 e i bordi dei controlli usano #dbdbdb. La prop variant del componente seleziona la famiglia semantica appropriata, senza richiedere una regola CSS separata per ogni campo o tag.
Lo stesso tema definisce un raggio standard di quattro pixel, un’altezza dei controlli di 2.25em e formule di spaziatura interna che sottraggono il bordo da un pixel. Poiché questi valori sono relativi al testo dei controlli, modificare la scala del font influisce sulla geometria. Lo spazio di mezzo em del tema indica una relazione tra componenti, non l’esistenza di una scala completa per la spaziatura del layout della pagina.
Sistema di design Oruga UI Definisci il layout che Oruga intenzionalmente non impone
Definisci il layout che Oruga intenzionalmente non impone
Il catalogo usa una colonna flessibile per l’editor e una colonna di 330px per le schede; sotto i 760px le colonne si impilano. Il titolo della pagina usa un font sans serif di sistema, mentre quello della scheda usa Georgia per richiamare una scheda editoriale. Entrambe le scelte sono originali e non richiedono file di font esterni.
Oruga non prescrive una griglia né un framework di utility. Il foglio di stile completo rende quindi visibili al lettore la spaziatura interna dei pannelli, gli spazi laterali sugli schermi stretti e le regole di a capo. Il contatore dei tag mantiene insieme numeratore e denominatore, mentre il titolo della scheda consente ai nomi lunghi delle note di andare a capo senza allargare la pagina incorporata.
Sistema di design Oruga UI Mantieni i valori selezionati separati dalla query di ricerca
Mantieni i valori selezionati separati dalla query di ricerca
OTaginput associa l’array degli argomenti selezionati tramite v-model. Il testo interno dell’autocompletamento filtra le etichette candidate senza sostituire quell’array. Il vocabolario contiene sei argomenti originali con definizioni concrete; la scheda aggiornata in tempo reale ripete le definizioni solo degli argomenti selezionati.
Il confronto di ricerca predefinito non distingue tra maiuscole e minuscole. Nel test locale è stato digitato Color e si è atteso che il filtro terminasse prima di selezionare l’opzione risultante. Un’asserzione immediata, durante il debounce dell’input, farebbe erroneamente pensare che il filtro non abbia funzionato. La selezione cancella quindi la query, mantenendo i tag già scelti.
Cerca Color e seleziona l’opzione corrispondente.
Aggiungi Forms per arrivare a tre argomenti insieme a Navigation.
Rimuovi un tag, verifica che la scheda si aggiorni e scegli un sostituto prima di salvare.
Sistema di design Oruga UI Gestisci separatamente vocabolario, duplicati e conteggio
Gestisci separatamente vocabolario, duplicati e conteggio
allow-new=false impedisce che una frase digitata a piacere diventi un’etichetta. allow-duplicates=false impedisce di aggiungere due volte la stessa etichetta esistente. maxitems=3 limita il numero totale di selezioni e mostra il contatore. Ogni impostazione protegge un aspetto diverso del vocabolario controllato.
L’applicazione verifica comunque che sia selezionato almeno un argomento quando si tenta di salvare. Il limite massimo di selezioni non implica un requisito minimo. Inoltre, controlla che il titolo, dopo aver rimosso gli spazi iniziali e finali, contenga almeno cinque caratteri significativi, mentre l’attributo maxlength dell’input nativo limita la lunghezza massima a ottanta caratteri.
Sistema di design Oruga UI Usa OField per le etichette e i messaggi di convalida specifici
Usa OField per le etichette e i messaggi di convalida specifici
OField fornisce le etichette visibili Note title e Topics e i relativi messaggi. Dopo un salvataggio non valido, il campo interessato riceve una variante danger e un messaggio concreto che spiega come correggerlo. Le indicazioni sui topic specificano l’intervallo consentito e la limitazione del vocabolario prima che si verifichi un errore.
Il menu a discesa nativo dell’input di tag segue il pattern combobox/listbox. In questa versione, il ruolo combobox appartiene a un wrapper e al suo interno è annidata la casella di testo modificabile. Perciò il controllo QA compila l’input effettivo Search topics, invece di presupporre che l’elemento con il ruolo combobox sia esso stesso un input.
Sistema di design Oruga UI Sistema di progettazione A un pacchetto di icone predefinito serve ancora il file del font
Anche un pacchetto di icone predefinito richiede il relativo file di font
Il controllo per rimuovere i tag usa il pacchetto di icone MDI predefinito di Oruga. Il caricamento del tema del componente non carica automaticamente quel font, quindi la configurazione completa include @mdi/font. L’anteprima autonoma usa un asset WOFF2 locale e le regole per le icone necessarie, evitando una dipendenza da font remoti.
La rimozione resta un vero pulsante con l’etichetta accessibile Remove topic. L’illustrazione decorativa della cartella non è correlata alle icone dei controlli ed è nascosta alle tecnologie assistive. Questa distinzione impedisce di scambiare un elemento ornamentale per un controllo interattivo.
Sistema di design Oruga UI Sistema di progettazione Invalida uno snapshot salvato quando cambiano i suoi input
Invalida un’istantanea salvata quando cambiano i suoi input
L’azione Save registra una frase che indica il titolo senza spazi superflui e il numero di topic selezionati. Un watcher osserva in modo profondo sia il titolo sia l’array dei topic: rimuovere un elemento cancella quindi la conferma, proprio come modificare il titolo. Save è disabilitato solo finché lo snapshot corrente resta salvato.
Clear note reimposta il titolo, tutti i topic selezionati, la validazione tentata e lo stato di salvataggio. La scheda mostra quindi Untitled research note e No topics selected. L’utente può vedere l’intero ciclo, da vuoto a modificato e poi salvato, senza operazioni di backend, caricamento o pubblicazione nascoste dietro il pulsante.
Mantieni il modello basato sull’array dei selezionati quando cambia la query.
Cancella il feedback di salvataggio in caso di modifiche all’array annidato.
Descrivi il risultato come stato locale, non come pubblicazione.
Sistema di design Oruga UI Sistema di progettazione Importa esplicitamente i componenti con la registrazione corrente di Oruga
Importa esplicitamente i componenti con la registrazione corrente di Oruga
La configurazione verificata per la versione 0.14.4 crea un’istanza Oruga e la installa sull’app Vue. App.vue importa esplicitamente OField, OInput, OTaginput, OTag e OButton. Questo approccio segue il modello di registrazione corrente; affidarsi a esempi meno recenti che davano per scontata la registrazione globale di tutti i componenti può lasciare l’applicazione incompleta.
Il README del tema specifica che questo tema predefinito usa i nomi di classe già presenti in Oruga e richiede il relativo foglio di stile, senza un ulteriore oggetto di configurazione del tema. Il punto d’ingresso importa, nell’ordine, quel foglio di stile, l’asset MDI e il layout originale. Gli esempi di codice completi qui sopra e la root di Vite qui sotto contengono tutti gli elementi necessari.
OTaginput, OField, OInput, OTag e OButton collegano un vocabolario vincolato a una scheda catalogo aggiornata in tempo reale.
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 non fornisce un sistema a griglia obbligatorio; questo layout è esplicito nell’applicazione CSS.
Il testo del contatore resta su una sola riga anche a larghezze ridotte.
04
Sistema di design Oruga UI Configurazione dell’agente IA del sistema di progettazione
Punto di partenza per l’implementazione
Oruga 0.14.4 verificato, tema predefinito opzionale 0.10.0 e MDI 7.4.47. I componenti sono importati esplicitamente; il tema predefinito non richiede ulteriore configurazione 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
Un prompt per il tuo progetto
Prompt per l’agente
Parti dal catalogo di note di ricerca con Oruga 0.14.4 e il relativo tema 0.10.0. Mantieni la selezione controllata di OTaginput a partire dal vocabolario di sei topic, la ricerca senza distinzione tra maiuscole e minuscole, i tag nuovi o duplicati disabilitati e il limite di tre tag. Collega le definizioni dei topic aggiornate in tempo reale e la validazione del titolo allo snapshot salvato, cancellando il feedback di salvataggio dopo le modifiche. Includi createOruga, il tema CSS e la configurazione dell’asset MDI locale. Reimposta una bozza vuota; non inventare dati di confronto tra prodotti né aggiornamenti di un catalogo remoto.
05
Sistema di design Oruga UI Fonti e ambito del sistema di progettazione
Oruga 0.14.4 con tema predefinito opzionale 0.10.0. Vocabolario originale e illustrazione del catalogo. Il salvataggio modifica soltanto lo stato locale della pagina, senza caricamento, pubblicazione o persistenza dopo un nuovo caricamento.
