# Sistema di progettazione Vuestic UI

## Sistema di design Vuestic UI Anteprima dell’interfaccia del sistema di progettazione

Valuta chiarezza, gerarchia e feedback, aggiungi un’osservazione significativa e salva una valutazione locale.

## Riferimento di progettazione del sistema di progettazione sistema di design Vuestic UI

Vuestic UI 1.10.3. I valori dei preset vengono letti dal servizio dei colori installato e le variabili dei componenti dal suo CSS. La scheda mantiene il preset chiaro predefinito, ma sovrascrive intenzionalmente --va-font-family con system-ui. Le forme decorative e la scala circostante sono originali.

### Preset di colore chiaro predefinito

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| primary | #154EC1 | Valutazione e azione principale. |
| secondary | #767C88 | Ruolo secondario. |
| success | #3D9209 | Risultato salvato. |
| info | #158DE3 | Ruolo informativo. |
| danger | #E42222 | Ruolo di errore. |
| warning | #FFD43A | Ruolo di avviso. |
| backgroundPrimary | #f6f6f6 | Superficie principale predefinita. |
| backgroundSecondary | #FFFFFF | Superficie in rilievo predefinita. |
| backgroundElement | #ECF0F1 | Superficie dell’elemento. |
| backgroundBorder | #DEE5F2 | Ruolo del bordo. |
| textPrimary | #262824 | Testo principale. |
| textInverted | #FFFFFF | Testo invertito. |
| focus | #49A8FF | Ruolo di focus. |
### Confronto con il preset scuro predefinito

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| primary | #3472F0 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| success | #66BE33 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| danger | #F34030 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| backgroundPrimary | #050A10 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| backgroundSecondary | #1F262F | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| backgroundElement | #131A22 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| backgroundBorder | #3D4C58 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| textPrimary | #F1F1F1 | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
| textInverted | #0B121A | Riferimento ufficiale del preset scuro; l’esempio locale resta chiaro. |
### CSS nativo e scale esplicite dell’applicazione

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --va-font-family | "Source Sans Pro", sans-serif | Impostazione predefinita della libreria; nell’esempio viene sovrascritta esplicitamente con system-ui. |
| --va-button-border-radius | 0.25rem | Raggio nativo del pulsante, compilato. |
| --va-form-element-border-radius | 0.25rem | Raggio condiviso dei moduli, compilato. |
| --va-button-content-py | 0.5rem | Spaziatura verticale del contenuto del pulsante. |
| --va-button-content-px | 0.75rem | Spaziatura orizzontale del contenuto del pulsante. |
| --va-rating-number-item-margin | 0.1em | Riferimento nativo della spaziatura in modalità numerica. |
| --va-rating-number-item-font-weight | 700 | Riferimento nativo dell’enfasi in modalità numerica. |
| Application title | 34px / 1.15; 29px narrow | Gerarchia originale dei titoli. |
| Application spacing | 6 / 7 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 24 / 28 / 32px | Valori effettivi del foglio di stile originale, non una scala di token Vuestic. |
| Application panel radius | 14px | Geometria originale circostante. |
| Layout | Flexible form + 280px summary; stack below 760px | Layout incorporato con altezza adattata al contenuto. |
## Guida completa al sistema di progettazione sistema di design Vuestic UI

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Sistema di progettazione sistema di design Vuestic UI: una libreria Vue configurabile con preset di colore denominati

### Una libreria Vue configurabile con preset di colore denominati

> Vuestic registra i propri servizi condivisi tramite createVuestic. L’esempio usa componenti nativi importati da vuestic-ui e il preset di colore chiaro predefinito. Valutazione, pulsanti, barra di avanzamento e avviso di successo risolvono i nomi dei colori semantici tramite lo stesso servizio.

La scheda è un’applicazione concreta di questi componenti: separa tre domande di valutazione, raccoglie un’osservazione di supporto, calcola una media e blocca un risultato locale salvato. I contrassegni colorati dei criteri e la composizione a due colonne sono scelte originali di progettazione dell’applicazione, non componenti aggiuntivi di Vuestic.

Leggi la specifica di supporto

## Sistema di progettazione sistema di design Vuestic UI: distinguere i preset del servizio dalle variabili geometriche di CSS

### Distinguere i preset del servizio dalle variabili geometriche di CSS

Il preset chiaro verificato definisce primary #154EC1, success #3D9209 e textPrimary #262824. Il preset scuro usa valori diversi per primary, text e surface, invece di limitarsi a invertire i colori della pagina chiara. La tabella di riferimento riporta entrambi i preset, mentre l’anteprima rimane intenzionalmente in modalità chiara.

La geometria dei componenti si configura tramite variabili CSS come --va-button-border-radius e --va-form-element-border-radius, entrambe pari a 0.25rem nel foglio di stile installato. Un preset di colori e un override di variabili CSS risolvono problemi diversi: usa il servizio per i ruoli semantici e la variabile documentata per la geometria dei componenti supportata.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: carica le icone necessarie e dichiara l’override del font

### Carica le icone necessarie e dichiara l’override del font

Il valore predefinito di --va-font-family di Vuestic indica Source Sans Pro. L’esempio sovrascrive questa variabile con system-ui, senza dipendere implicitamente da un font mai caricato. Le etichette dei componenti nativi e il testo dell’applicazione condividono quindi uno stack di font esplicito e disponibile.

Le icone di valutazione predefinite usano nomi di Material Icons come star e star_outline. Il foglio di stile del font locale viene importato da @quasar/extras e incluso nel bundle insieme ai relativi file. Senza questa risorsa, al posto delle stelle previste potrebbero comparire le parole letterali delle icone. Il font delle icone è mantenuto separato dall’override della famiglia di caratteri del testo dell’applicazione.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: usa zero come stato senza valutazione, non come punteggio basso

### Usare zero come stato senza risposta anziché come punteggio basso

Ogni VaRating è associato al valore numerico di un criterio. Il valore max è cinque e clearable è abilitato, quindi selezionare di nuovo il punteggio corrente può riportare quel criterio a zero. Nell’interfaccia, zero è indicato come «Non valutato», anziché essere presentato come un giudizio completo pari a zero su cinque.

La media è calcolata dividendo per il numero di valutazioni positive. In questo modo i criteri senza risposta non incidono sul risultato mentre la scheda è in compilazione. Per salvare è comunque necessario rispondere a tutti e tre i criteri, quindi la media finale rappresenta sempre la valutazione completa. Ogni modifica a un punteggio aggiorna subito l’indicatore di completamento, la barra di avanzamento e il riepilogo.

1. Salva la scheda vuota e controlla gli avvisi relativi alle valutazioni mancanti e alle note.

2. Assegna 4 a Chiarezza, 3 a Gerarchia e 2 a Feedback: la media diventa 3,0.

3. Scrivi un’osservazione concreta e salva; poi usa «Ricomincia» per reimpostare l’intera scheda.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: un’osservazione utile deve contenere testo significativo e avere spazio sufficiente

### Un’osservazione utile richiede un testo significativo e spazio sufficiente

VaTextarea mostra un’etichetta visibile, un limite di quattrocento caratteri e un contatore. Dopo un tentativo di salvataggio, l’applicazione verifica che il valore, eliminati gli spazi iniziali e finali, contenga almeno venti caratteri. Una stringa di soli spazi non può quindi soddisfare il requisito, anche se la sua lunghezza nominale rientra nel limite.

L’area di testo attiva l’adattamento automatico delle dimensioni, con un minimo di quattro righe e un massimo di dodici. È un’impostazione funzionale, non una semplice prop di esempio: senza autosize, l’impostazione del numero minimo di righe non produceva l’area per le note espandibile prevista. La versione corretta mantiene visibile l’osservazione anche sugli schermi stretti, conservando lo scorrimento normale per le note eccezionalmente lunghe.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: ricava l’avanzamento dal completamento, non dalla media dei punteggi

### Calcolare i progressi dal completamento, non dalla media dei punteggi

La barra di avanzamento misura quanti criteri hanno ricevuto una risposta positiva, in percentuale: numero di criteri valutati diviso tre, moltiplicato per cento. Il numero grande accanto alla barra indica la media dei punteggi. I denominatori sono diversi e non vanno confusi: anche tre punteggi bassi possono corrispondere al completamento del cento per cento.

La frase sul completamento indica direttamente il numeratore e il denominatore. La media è etichettata «Media dei criteri valutati» e il riepilogo riporta il punteggio di ciascun criterio. Queste etichette aiutano a capire il calcolo, invece di interpretare una barra di avanzamento priva di spiegazioni come un giudizio complessivo sulla qualità.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: blocca una valutazione locale completata finché non viene reimpostata esplicitamente

### Bloccare una valutazione locale completata finché non viene ripristinata esplicitamente

Il salvataggio imposta prima attempted e poi controlla tutte le valutazioni e l’osservazione, prima di abilitare lo stato di salvataggio. L’indicatore saved rende di sola lettura le valutazioni e l’area di testo e disabilita il pulsante Salva. L’avviso di conferma specifica che la valutazione è stata salvata localmente e che non è stato inviato nulla.

«Ricomincia» cancella tutte le valutazioni, la nota, la visibilità degli errori di convalida e lo stato di salvataggio con un unico gestore. Questa scelta è intenzionale: modificare un valore dopo il salvataggio renderebbe altrimenti non aggiornata la conferma. L’esempio non implica la presenza di un backend, di un account o di un destinatario della valutazione.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: assegna a ogni elemento di valutazione un nome che includa il criterio e il valore

### Assegna a ogni elemento di valutazione un nome che includa il criterio e il valore

Gli elementi nativi VaRating espongono pulsanti nell’albero di accessibilità. aria-item-label include il nome del criterio e i segnaposto value/max, generando etichette come «Punteggio di Chiarezza: 4 su 5». Si evitano così quindici controlli a forma di stella indistinguibili quando nella stessa pagina compaiono tre valutazioni.

L’area di testo ha una propria etichetta visibile, la barra di avanzamento un’etichetta di completamento e l’avviso di salvataggio è una regione di stato. I contrassegni decorativi dei criteri sono nascosti alle tecnologie assistive. I controlli locali hanno attivato pulsanti di valutazione con etichette effettive, verificato la convalida e controllato il layout finale a 280px, invece di limitarsi a verificare la presenza di attributi ARIA.

- Assegna a ogni valutazione ripetuta un’etichetta specifica per il criterio.

- Distingui visivamente gli stati senza valutazione e di sola lettura.

- Verifica il riepilogo numerico dopo aver interagito con i controlli nativi effettivi.

Leggi la specifica di supporto

## Sistema di design Vuestic UI sistema di progettazione: includi il plugin, il componente CSS e la risorsa locale delle icone

### Includere il plugin, il componente CSS e l’asset locale dell’icona

Il file di ingresso registra createVuestic e importa vuestic-ui/css prima del foglio di stile originale del layout. App.vue importa tutti i componenti utilizzati, quindi l’esempio non dipende da una configurazione di importazione automatica non documentata. L’override condiviso del font viene applicato dopo CSS della libreria.

Il comando del pacchetto include @quasar/extras solo come sorgente del font locale Material Icons; non registra Quasar né integra i suoi componenti nella scheda di valutazione. L’intero SFC e il foglio di stile qui sopra possono essere inseriti nella configurazione Vite Vue seguente. L’anteprima autonoma generata incorpora le risorse necessarie e non scarica font remoti.

Leggi la specifica di supporto

## Sistema di design Vuestic UI esempi di componenti del sistema di progettazione

### Scheda di valutazione completa con componenti nativi

VaRating, VaTextarea, VaButton, VaChip, VaProgressBar e VaAlert sono collegati a un unico modello di valutazione.

```
<script setup>
import {ref,computed} from 'vue';
import {VaRating,VaTextarea,VaButton,VaAlert,VaChip,VaProgressBar} from 'vuestic-ui';
const criteria=ref([{name:'Clarity',hint:'Can you tell what the next action will do?',value:0},{name:'Hierarchy',hint:'Does the most important information stand out?',value:0},{name:'Feedback',hint:'Does the page explain what changed?',value:0}]);
const note=ref(''),attempted=ref(false),saved=ref(false);
const rated=computed(()=>criteria.value.filter(x=>x.value>0).length),average=computed(()=>rated.value?(criteria.value.reduce((a,x)=>a+x.value,0)/rated.value).toFixed(1):'—');
const noteError=computed(()=>attempted.value&&note.value.trim().length<20);
function save(){attempted.value=true;if(rated.value===3&&note.value.trim().length>=20)saved.value=true}
function reset(){criteria.value.forEach(x=>x.value=0);note.value='';saved.value=false;attempted.value=false}
</script>
<template><main class="review-shell"><header><p class="eyebrow">DESIGN CRITIQUE · PERSONAL WORKSHEET</p><h1>Turn an impression into useful feedback.</h1><p>Review an interface using three specific questions. Keep one concrete observation alongside the scores.</p></header><div class="review-layout"><section class="review-form"><div class="form-head"><h2>Your assessment</h2><VaChip outline size="small">{{rated}} of 3 rated</VaChip></div><div v-for="(criterion,index) in criteria" :key="criterion.name" class="criterion"><div class="criterion-mark" :class="'mark-'+index" aria-hidden="true"><i></i><b></b></div><div class="criterion-body"><h3>{{criterion.name}}</h3><p>{{criterion.hint}}</p><VaRating v-model="criterion.value" :max="5" clearable color="primary" :readonly="saved" :aria-label="criterion.name+' rating: '+criterion.value+' of 5'" :aria-item-label="criterion.name+' score {value} of {max}'"/><span class="score">{{criterion.value?criterion.value+' / 5':'Not rated'}}</span></div></div><p v-if="attempted&&rated<3" class="error" role="alert">Rate all three criteria before saving.</p><VaTextarea v-model="note" label="One concrete observation" placeholder="For example: the Save button gives no confirmation after the form closes." autosize :min-rows="4" :max-rows="12" :max-length="400" counter :error="noteError" :error-messages="noteError?['Write at least 20 meaningful characters.']:[]" :readonly="saved"/><div class="actions"><VaButton @click="save" :disabled="saved">Save assessment</VaButton><VaButton preset="secondary" @click="reset">Start again</VaButton></div></section><aside><div class="summary"><p class="eyebrow">ASSESSMENT SNAPSHOT</p><div class="average">{{average}}<span>/ 5</span></div><p class="average-label">Average of rated criteria</p><VaProgressBar :model-value="rated/3*100" color="primary" aria-label="Criteria completion"/><p class="completion">{{rated}} of 3 criteria completed</p><p class="guidance">A score starts a conversation. Your example explains what should change and why.</p><dl><div v-for="criterion in criteria" :key="criterion.name"><dt>{{criterion.name}}</dt><dd>{{criterion.value||'—'}}</dd></div></dl></div><VaAlert v-if="saved" color="success" outline class="saved" role="status"><strong>Assessment saved locally.</strong><p>All three criteria and your observation are captured in this preview. Nothing was sent.</p></VaAlert><p v-else class="local-note">This worksheet stores only local page state. It does not submit a review to another person.</p></aside></div></main></template>
```

Riferimento del codice

- Zero significa «non valutato» ed è escluso dalla media.

- Per salvare servono tutte e tre le valutazioni e una nota di venti caratteri, esclusi gli spazi iniziali e finali.

- Le valutazioni e il testo salvati diventano di sola lettura finché non si seleziona «Ricomincia».

### Layout originale completo e configurazione tipografica

Override esplicito del font, schede responsive e contrassegni decorativi dei criteri.

```
:root{--va-font-family:system-ui,sans-serif}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:#f3f5f8;color:#262824;font-family:system-ui,sans-serif}.review-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.13em;color:#667182}h1{font-size:34px;line-height:1.15;margin:12px 0;max-width:710px}header>p:last-child{max-width:640px;line-height:1.6;font-size:15px;color:#677080}.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;margin-top:28px}.review-form,.summary{background:white;border:1px solid #dee5f2;border-radius:14px;padding:24px;min-width:0}.form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.form-head h2{font-size:20px;font-weight:650}.criterion{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid #e6eaf0}.criterion:last-of-type{margin-bottom:24px}.criterion-body{min-width:0;flex:1}.criterion h3{font-size:16px;font-weight:650;margin:0 0 6px}.criterion p{font-size:13px;line-height:1.5;color:#677080;margin:0 0 12px}.criterion-mark{width:58px;height:58px;border-radius:12px;flex-shrink:0;position:relative;overflow:hidden;background:#e8efff}.criterion-mark i,.criterion-mark b{position:absolute;display:block}.mark-0 i{width:27px;height:27px;background:#7a9cdf;border-radius:50%;left:10px;top:14px}.mark-0 b{width:14px;height:14px;background:#154ec1;border-radius:50%;left:31px;top:22px}.mark-1{background:#eee8f8}.mark-1 i{width:15px;height:34px;background:#9273b6;left:10px;top:13px}.mark-1 b{width:15px;height:19px;background:#c2aedb;left:32px;top:28px}.mark-2{background:#e6f0e0}.mark-2 i{width:36px;height:23px;border-radius:6px;background:#86a16f;left:11px;top:14px}.mark-2 b{border:8px solid transparent;border-top-color:#86a16f;left:17px;top:33px}.score{display:block;font-size:11px;color:#667182;margin-top:7px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}.average{font-size:64px;line-height:1.2;font-weight:650;margin-top:16px;color:#154ec1}.average span{font-size:19px;color:#78828f;font-weight:400;margin-left:8px}.average-label{font-size:12px;color:#697482;margin:5px 0 24px}.completion{font-size:11px;color:#687387;margin-top:10px}.guidance{font-size:14px;line-height:1.6;margin:24px 0}.summary dl>div{display:flex;justify-content:space-between;border-top:1px solid #e6eaf0;padding:12px 0;font-size:13px}.summary dd{font-weight:700}.saved{margin-top:16px;font-size:13px;line-height:1.6}.saved p{margin-top:7px}.local-note{font-size:12px;line-height:1.6;color:#687387;padding:16px 5px}.error{font-size:13px;color:#b71717;margin-bottom:16px}@media(max-width:760px){.review-shell{padding:20px}.review-layout{grid-template-columns:minmax(0,1fr)}h1{font-size:29px}}@media(max-width:360px){.review-shell{padding:14px}.review-form,.summary{padding:16px}.criterion{gap:12px}.criterion-mark{width:38px;height:48px}.criterion-mark i,.criterion-mark b{transform:scale(.7);transform-origin:left}.criterion-mark i{left:4px}.criterion-mark b{left:18px}.actions>*{width:100%}.va-textarea{max-width:100%}}
```

Riferimento del codice

- Material Icons mantiene una famiglia di font distinta.

- Non viene impostata un’altezza minima del documento.

## Configurazione dell’agent sistema di design Vuestic UI

### Punto di partenza per l’implementazione

Verificati Vuestic UI 1.10.3 e Material Icons locali da @quasar/extras 2.1.0. Sono forniti entrambi gli esempi sorgente completi; non è necessario alcun servizio di font esterno.

```
// npm create vite@latest vuestic-review -- --template vue
// cd vuestic-review && npm install
// npm install vuestic-ui@1.10.3 @quasar/extras@2.1.0
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createVuestic} from 'vuestic-ui';
import 'vuestic-ui/css';
import '@quasar/extras/material-icons/material-icons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createVuestic()).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

```
Usa Vuestic UI 1.10.3 per riprodurre la scheda di valutazione del design con tre criteri VaRating nativi, VaTextarea e controlli per avanzamento, stato, salvataggio e reimpostazione. Calcola la media in base ai criteri valutati e, per salvare, richiedi tutti e tre i punteggi e una nota di venti caratteri, esclusi gli spazi iniziali e finali. Mantieni l’area di testo con ridimensionamento automatico, così che la valutazione completa resti visibile, e assicurati che lo stato salvato di sola lettura e il comportamento di reimpostazione siano coerenti. Includi createVuestic, il componente nativo CSS e il font locale delle icone. Si tratta di una registrazione locale della valutazione, non di un servizio per l’invio di gruppi di ispezioni.
```

## Sistema di design Vuestic UI fonti e ambito del sistema di progettazione

Vuestic UI 1.10.3 con il preset di colori chiaro predefinito e un override esplicito del font di sistema. Domande e illustrazioni originali della valutazione. Lo stato salvato è locale, senza invio a servizi di valutazione esterni né persistenza dopo un ricaricamento.

- Installazione Configurazione del plugin e del foglio di stile.

- Configurazione dei colori Preset semantici con nome.

- Variabili CSS Geometria dei componenti supportata e override dei font.

- Valutazione Stato clearable, etichette e modello.

- Textarea Ridimensionamento automatico, limiti di righe e visualizzazione della convalida.

- Barra di avanzamento Semantica di value e max.

- Alert Aspetto visibile del risultato.

## Sistema di design Vuestic UI risorse correlate del sistema di progettazione

### Web Awesome

Esamina i token semantici effettivi di Web Awesome nei suoi elementi personalizzati nativi, comprese le modifiche circoscritte di raggio e spaziatura, lo stile dello shadow DOM, il comportamento di select e la convalida degli input.

### Ariakit

Ariakit fornisce componenti React senza stili, con stato condiviso esplicito e parti accessibili componibili. Il suo combobox distingue il testo digitato dalla selezione confermata, risultando utile per i selettori basati sulla ricerca; il cercatore di riferimenti qui sotto illustra questa distinzione con risultati raggruppati e non disponibili.

### Bits UI

Bits UI offre componenti Svelte headless, componibili tramite parti native e lo stato di Svelte 5. L’esempio combina una casella di controllo con stato misto derivato, sezioni dell’accordion espandibili in modo indipendente e una finestra di dialogo di revisione basata su portal, includendo la configurazione completa degli stili.


- [Riferimento per l’implementazione](https://ui.vuestic.dev/ui-elements/rating/)
- [Fonte](https://ui.vuestic.dev/services/colors-config/)
- [Fonte](https://ui.vuestic.dev/styles/css-variables/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/getting-started/installation/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/services/colors-config/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/styles/css-variables/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/ui-elements/rating/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/ui-elements/textarea/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Leggi la specifica di supporto](https://ui.vuestic.dev/ui-elements/alert/)
- [Riferimento del codice](https://ui.vuestic.dev/ui-elements/rating/)
- [Riferimento del codice](https://ui.vuestic.dev/styles/css-variables/)
- [Installazione Configurazione del plugin e del foglio di stile.](https://ui.vuestic.dev/getting-started/installation/)
- [Configurazione dei colori Preset semantici con nome.](https://ui.vuestic.dev/services/colors-config/)
- [Variabili CSS Geometria dei componenti supportata e override dei font.](https://ui.vuestic.dev/styles/css-variables/)
- [Valutazione Stato clearable, etichette e modello.](https://ui.vuestic.dev/ui-elements/rating/)
- [Textarea Ridimensionamento automatico, limiti di righe e visualizzazione della convalida.](https://ui.vuestic.dev/ui-elements/textarea/)
- [Barra di avanzamento Semantica di value e max.](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Alert Aspetto visibile del risultato.](https://ui.vuestic.dev/ui-elements/alert/)