# Système de design Vuestic UI

## Aperçu de l’interface du système de design Vuestic UI

Évaluez la clarté, la hiérarchie et le retour d’information, ajoutez une observation pertinente et enregistrez une évaluation locale.

## Référence de design du système de design Vuestic UI

Vuestic UI 1.10.3. Les valeurs des préréglages proviennent du service de couleurs installé et les variables des composants, de son CSS. La fiche conserve le préréglage clair par défaut, mais remplace volontairement --va-font-family par system-ui. Les formes décoratives et l’échelle environnante sont originales.

### Préréglage de couleurs clair par défaut

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| primary | #154EC1 | Note et action principale. |
| secondary | #767C88 | Rôle secondaire. |
| success | #3D9209 | Résultat enregistré. |
| info | #158DE3 | Rôle d’information. |
| danger | #E42222 | Rôle d’erreur. |
| warning | #FFD43A | Rôle d’avertissement. |
| backgroundPrimary | #f6f6f6 | Surface principale par défaut. |
| backgroundSecondary | #FFFFFF | Surface surélevée par défaut. |
| backgroundElement | #ECF0F1 | Surface de l’élément. |
| backgroundBorder | #DEE5F2 | Rôle de délimitation. |
| textPrimary | #262824 | Texte principal. |
| textInverted | #FFFFFF | Texte inversé. |
| focus | #49A8FF | Rôle de focus. |
### Comparaison avec le préréglage sombre par défaut

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| primary | #3472F0 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| success | #66BE33 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| danger | #F34030 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| backgroundPrimary | #050A10 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| backgroundSecondary | #1F262F | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| backgroundElement | #131A22 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| backgroundBorder | #3D4C58 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| textPrimary | #F1F1F1 | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
| textInverted | #0B121A | Référence officielle du préréglage sombre ; l’exemple local reste en mode clair. |
### Échelle native de CSS et échelles explicites de l’application

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --va-font-family | "Source Sans Pro", sans-serif | Valeur par défaut de la bibliothèque ; remplacée explicitement par system-ui dans l’exemple. |
| --va-button-border-radius | 0.25rem | Rayon natif compilé des boutons. |
| --va-form-element-border-radius | 0.25rem | Rayon compilé commun des champs de formulaire. |
| --va-button-content-py | 0.5rem | Marge intérieure verticale du contenu des boutons. |
| --va-button-content-px | 0.75rem | Marge intérieure horizontale du contenu des boutons. |
| --va-rating-number-item-margin | 0.1em | Référence d’espacement native pour le mode numérique. |
| --va-rating-number-item-font-weight | 700 | Référence de mise en évidence native pour le mode numérique. |
| Application title | 34px / 1.15; 29px narrow | Hiérarchie originale des titres. |
| Application spacing | 6 / 7 / 8 / 10 / 12 / 14 / 16 / 18 / 22 / 24 / 28 / 32px | Valeurs réelles de la feuille de style originale, et non une échelle de jetons Vuestic. |
| Application panel radius | 14px | Géométrie environnante d’origine. |
| Layout | Flexible form + 280px summary; stack below 760px | Mise en page intégrée à hauteur du contenu. |
## Vuestic UI Guide complet du système de design

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design Vuestic UI — bibliothèque Vue configurable avec des préréglages de couleurs nommés

### Une bibliothèque Vue configurable avec des préréglages de couleurs nommés

> Vuestic enregistre ses services partagés via createVuestic. L’exemple utilise des composants natifs importés depuis vuestic-ui et le préréglage de couleurs clair par défaut. La notation, les boutons, la barre de progression et l’alerte de réussite résolvent leurs noms de couleurs sémantiques via ce même service.

La fiche de travail met concrètement ces composants en application : elle distingue trois questions d’évaluation, recueille une observation à l’appui, calcule une moyenne et verrouille un résultat enregistré localement. Les repères colorés des critères et la composition sur deux colonnes relèvent de la conception propre à l’application, et non de composants Vuestic supplémentaires.

Consultez la spécification associée

## Système de design Vuestic UI : distinguer les préréglages du service des variables de géométrie CSS

### Distinguer les préréglages du service des variables de géométrie CSS

Le préréglage clair vérifié définit primary #154EC1, success #3D9209 et textPrimary #262824. Son préréglage sombre utilise des valeurs différentes pour primary, le texte et les surfaces ; il ne se contente pas d’inverser la page claire. Le tableau de référence présente les deux préréglages, tandis que l’aperçu reste volontairement en mode clair.

La géométrie des composants se configure à l’aide de variables CSS telles que --va-button-border-radius et --va-form-element-border-radius, toutes deux définies à 0.25rem dans la feuille de style installée. Un préréglage de couleurs et la surcharge d’une variable CSS répondent à des besoins différents : utilisez le service pour les rôles sémantiques et la variable documentée pour la géométrie prise en charge des composants.

Consultez la spécification associée

## Système de design Vuestic UI : charger les icônes requises et définir la surcharge de police

### Charger les icônes requises et définir la surcharge de police

La valeur par défaut de --va-font-family dans Vuestic désigne Source Sans Pro. L’exemple remplace cette variable par system-ui, plutôt que de dépendre implicitement d’une police qui n’a jamais été chargée. Les libellés des composants natifs et le texte de l’application utilisent ainsi la même pile de polices, explicitement disponible.

Les icônes de notation par défaut utilisent des noms de Material Icons, comme star et star_outline. Leur feuille de style de police locale est importée depuis @quasar/extras et intégrée avec les fichiers de police correspondants. Sans cette ressource, les mots littéraux des icônes peuvent remplacer les étoiles attendues. La police des icônes reste distincte de la substitution de la famille de polices du texte de l’application.

Consultez la spécification associée

## Système de design Vuestic UI : utiliser zéro comme état sans réponse, plutôt que comme mauvaise note

### Utiliser zéro comme état sans réponse plutôt que comme mauvaise note

Chaque VaRating est lié à la valeur numérique d’un critère. Sa valeur max est cinq et l’option clearable est activée : sélectionner à nouveau la note actuelle permet donc de ramener ce critère à zéro. Pour une valeur nulle, l’interface affiche « Non évalué » au lieu de la présenter comme une note définitive de zéro sur cinq.

La moyenne est calculée en divisant la somme des notes par le nombre de notes positives. Les critères sans réponse ne pénalisent ainsi pas la fiche en cours de remplissage. L’enregistrement exige toutefois une réponse pour les trois critères, afin que la moyenne finale reflète toujours l’évaluation complète. Toute modification d’une note met immédiatement à jour l’indicateur de complétion, la barre de progression et le récapitulatif.

1. Enregistrez la fiche vierge et examinez les messages relatifs aux notes manquantes et à l’observation.

2. Attribuez 4 à la clarté, 3 à la hiérarchie et 2 aux commentaires : la moyenne passe à 3.0.

3. Rédigez une observation concrète et enregistrez-la, puis utilisez « Recommencer » pour réinitialiser toute la fiche.

Consultez la spécification associée

## Système de design Vuestic UI : une observation utile exige un texte pertinent et suffisamment d’espace

### Une observation utile nécessite un texte pertinent et suffisamment d’espace

VaTextarea affiche un libellé visible, limite le texte à quatre cents caractères et présente un compteur. Après une tentative d’enregistrement, l’application vérifie que la valeur, une fois les espaces superflus supprimés, comporte au moins vingt caractères. Une chaîne composée d’espaces ne peut donc pas satisfaire cette exigence, même si sa longueur nominale suffit.

La zone de texte active l’ajustement automatique de la hauteur, avec un minimum de quatre lignes et un maximum de douze. Il s’agit d’un paramètre fonctionnel, et non d’une simple propriété illustrative : sans cet ajustement, le réglage du nombre minimal de lignes ne produisait pas la zone de saisie extensible souhaitée. La version corrigée laisse visible l’observation sur les écrans étroits, tout en conservant le défilement normal pour les notes exceptionnellement longues.

Consultez la spécification associée

## Système de design Vuestic UI : calculer la progression selon les critères remplis, et non selon la moyenne des notes

### Calculer la progression à partir des tâches terminées, et non de la moyenne des notes

La barre de progression indique le nombre de critères ayant reçu une réponse positive, exprimé ainsi : nombre de critères notés divisé par trois, puis multiplié par cent. Le grand nombre affiché à côté correspond à la moyenne des notes. Ces deux mesures reposent sur des dénominateurs différents et ne doivent pas être confondues : trois notes faibles peuvent tout de même représenter un taux de complétion de cent pour cent.

La phrase de complétion indique directement le numérateur et le dénominateur. La moyenne porte le libellé « Moyenne des critères notés », et le récapitulatif reprend la note de chaque critère. Ces libellés aident à comprendre le calcul, plutôt qu’à interpréter une barre de progression sans explication comme une évaluation globale de la qualité.

Consultez la spécification associée

## Système de design Vuestic UI : verrouiller une évaluation locale terminée jusqu’à sa réinitialisation explicite

### Verrouiller une évaluation locale terminée jusqu’à une réinitialisation explicite

Lors de l’enregistrement, l’application active d’abord l’indicateur de tentative, puis vérifie que toutes les notes et l’observation sont renseignées avant d’activer l’état enregistré. Cet état rend les notes et la zone de texte en lecture seule et désactive le bouton d’enregistrement. L’alerte de réussite précise que l’évaluation a été enregistrée localement et qu’aucune donnée n’a été envoyée.

L’action « Recommencer » efface en une seule opération toutes les notes, l’observation, les messages de validation et l’état d’enregistrement. Ce comportement est volontairement explicite : sinon, la modification d’une valeur après l’enregistrement rendrait la confirmation obsolète. L’exemple ne suppose l’existence d’aucun serveur, compte ni destinataire de l’évaluation.

Consultez la spécification associée

## Système de design Vuestic UI : nommer chaque élément de notation avec son critère et sa valeur

### Nommer chaque élément de notation avec son critère et sa valeur

Les éléments natifs de VaRating exposent des boutons dans l’arborescence d’accessibilité. aria-item-label comprend le nom du critère ainsi que les espaces réservés pour la valeur et le maximum, ce qui produit des libellés tels que « Note de clarté : 4 sur 5 ». Cela évite de présenter quinze commandes en forme d’étoile impossibles à distinguer lorsque trois notations figurent sur la même page.

La zone de texte possède son propre libellé visible, la barre de progression indique la complétion et l’alerte d’enregistrement constitue une région d’état. Les repères décoratifs des critères sont masqués aux technologies d’assistance. Les vérifications locales ont activé les vrais boutons de notation dotés de libellés, testé la validation et examiné la mise en page finale à 280px, plutôt que de se fier uniquement à la présence d’attributs ARIA.

- Attribuez à chaque note répétée un libellé d’élément propre à son critère.

- Distinguez visiblement les états sans réponse et en lecture seule.

- Vérifiez le récapitulatif numérique après avoir utilisé les contrôles natifs réels.

Consultez la spécification associée

## Système de design Vuestic UI Inclure le plugin, le composant CSS et la ressource d’icône locale

### Inclure le plugin, le composant CSS et la ressource d’icône locale

Le point d’entrée enregistre createVuestic et importe vuestic-ui/css avant la feuille de style de mise en page d’origine. App.vue importe chaque composant utilisé ; l’exemple ne dépend donc pas d’une configuration d’import automatique non documentée. La surcharge de police partagée est appliquée après la bibliothèque CSS.

La commande du package inclut @quasar/extras uniquement comme source de la police locale Material Icons ; elle n’enregistre pas Quasar et ne mélange pas ses composants à la feuille d’exercice. Le SFC complet et la feuille de style ci-dessus peuvent être intégrés à la configuration Vite Vue ci-dessous. L’aperçu autonome généré intègre les ressources requises et ne récupère aucune police distante.

Consultez la spécification associée

## Exemples de composants du système de design Vuestic UI

### Feuille d’évaluation complète avec contrôles natifs

VaRating, VaTextarea, VaButton, VaChip, VaProgressBar et VaAlert sont reliés à un même modèle d’évaluation.

```
<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>
```

Référence du code

- La valeur zéro signifie « non noté » et n’entre pas dans le calcul de la moyenne.

- L’enregistrement nécessite les trois notes et une note d’au moins vingt caractères après suppression des espaces superflus.

- Après l’enregistrement, les notes et le texte passent en lecture seule jusqu’à ce que vous recommenciez.

### Configuration d’origine complète de la mise en page et de la typographie

Surcharge explicite de la police, cartes adaptatives et repères décoratifs pour les critères.

```
: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%}}
```

Référence du code

- Material Icons conserve sa propre famille de polices.

- Aucune hauteur minimale du document n’est utilisée.

## Configuration de l’agent IA du système de design Vuestic UI

### Point de départ de l’implémentation

Versions vérifiées : Vuestic UI 1.10.3 et Material Icons local depuis @quasar/extras 2.1.0. Les deux exemples de code complets sont fournis ; aucun service de polices externe n’est nécessaire.

```
// 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 pour votre projet

```
Utilisez Vuestic UI 1.10.3 pour reproduire la feuille d’évaluation de conception avec trois critères VaRating natifs, VaTextarea, une barre de progression, un état et des commandes d’enregistrement/réinitialisation. Calculez la moyenne à partir des critères notés et exigez les trois notes ainsi qu’une note de vingt caractères après suppression des espaces superflus avant l’enregistrement. Conservez la zone de texte à ajustement automatique afin que toute l’évaluation reste visible, et veillez à la cohérence de l’état en lecture seule après l’enregistrement et du comportement de réinitialisation. Incluez createVuestic, CSS natif et la police d’icônes locale. Il s’agit d’un compte rendu d’évaluation local, pas d’un service de traitement de lots d’inspection.
```

## Sources et périmètre du système de design Vuestic UI

Vuestic UI 1.10.3 avec le préréglage de couleurs claires par défaut et une surcharge explicite de la police système. Questions d’évaluation et illustrations d’origine. L’état enregistré est local : aucune soumission d’évaluation externe ni persistance après rechargement.

- Installation Configuration du plugin et de la feuille de style.

- Configuration des couleurs Préréglages sémantiques nommés.

- Variables CSS Géométrie des composants prise en charge et surcharges de police.

- Notation État effaçable, libellés et modèle.

- Zone de texte Ajustement automatique, limites de lignes et affichage de la validation.

- Barre de progression Sémantique de la valeur et du maximum.

- Alerte Présentation du résultat visible.

## Ressources associées au système de design Vuestic UI

### Web Awesome

Examinez les véritables jetons sémantiques de Web Awesome dans des éléments personnalisés natifs, notamment les changements de rayon et d’espacement propres à chaque portée, le style du shadow DOM, le comportement des menus déroulants et la validation des champs de saisie.

### Ariakit

Ariakit fournit des composants React sans style, avec un état partagé explicite et des éléments accessibles combinables. Son combobox distingue la saisie de texte de la sélection validée, ce qui le rend utile pour les sélecteurs pilotés par la recherche ; le chercheur de références ci-dessous illustre cette distinction à l’aide de résultats regroupés et indisponibles.

### Bits UI

Bits UI fournit des composants Svelte sans interface prédéfinie, composés à l’aide d’éléments natifs et de l’état de Svelte 5. L’exemple associe une case à cocher à état mixte calculé, des sections d’accordéon dépliables indépendamment et une boîte de dialogue de révision basée sur un portail, avec la configuration de style complète.


- [Référence de mise en œuvre](https://ui.vuestic.dev/ui-elements/rating/)
- [Source](https://ui.vuestic.dev/services/colors-config/)
- [Source](https://ui.vuestic.dev/styles/css-variables/)
- [Consultez la spécification associée](https://ui.vuestic.dev/getting-started/installation/)
- [Consultez la spécification associée](https://ui.vuestic.dev/services/colors-config/)
- [Consultez la spécification associée](https://ui.vuestic.dev/styles/css-variables/)
- [Consultez la spécification associée](https://ui.vuestic.dev/ui-elements/rating/)
- [Consultez la spécification associée](https://ui.vuestic.dev/ui-elements/textarea/)
- [Consultez la spécification associée](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Consultez la spécification associée](https://ui.vuestic.dev/ui-elements/alert/)
- [Référence du code](https://ui.vuestic.dev/ui-elements/rating/)
- [Référence du code](https://ui.vuestic.dev/styles/css-variables/)
- [Installation Configuration du plugin et de la feuille de style.](https://ui.vuestic.dev/getting-started/installation/)
- [Configuration des couleurs Préréglages sémantiques nommés.](https://ui.vuestic.dev/services/colors-config/)
- [Variables CSS Géométrie des composants prise en charge et surcharges de police.](https://ui.vuestic.dev/styles/css-variables/)
- [Notation État effaçable, libellés et modèle.](https://ui.vuestic.dev/ui-elements/rating/)
- [Zone de texte Ajustement automatique, limites de lignes et affichage de la validation.](https://ui.vuestic.dev/ui-elements/textarea/)
- [Barre de progression Sémantique de la valeur et du maximum.](https://ui.vuestic.dev/ui-elements/progress-bar/)
- [Alerte Présentation du résultat visible.](https://ui.vuestic.dev/ui-elements/alert/)