# Système de design Vant

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

Sélectionnez un destinataire, modifiez une adresse, validez une nouvelle entrée et changez le thème du composant natif.

## Référence de design du système de design Vant

Variables CSS de Vant 4.10.2, lues dans la feuille de style de base installée. L’aperçu applique une surcharge originale de la couleur principale, dans les tons sarcelle, via ConfigProvider ; les rôles par défaut ci-dessous sont explicitement indiqués.

### Rôles de couleur par défaut

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --van-primary-color | var(--van-blue) | Alias d’action par défaut ; le bleu est #1989fa. |
| --van-success-color | var(--van-green) | Alias de succès ; le vert est #07c160. |
| --van-danger-color | var(--van-red) | Alias de danger ; le rouge est #ee0a24. |
| --van-warning-color | var(--van-orange) | Alias d’avertissement ; l’orange est #ff976a. |
| --van-text-color | var(--van-gray-8) | Alias du texte principal ; gray-8 correspond à #323233. |
| --van-text-color-2 | var(--van-gray-6) | Alias du texte secondaire ; gray-6 correspond à #969799. |
| --van-border-color | var(--van-gray-3) | Alias de séparateur ; gray-3 correspond à #ebedf0. |
| --van-background | var(--van-gray-1) | Surface de page ; gray-1 correspond à #f7f8fa. |
| --van-background-2 | var(--van-white) | Surface de composant ; white correspond à #fff. |
### Échelle des marges internes

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --van-padding-base | 4px | Petit décalage interne. |
| --van-padding-xs | 8px | Petit espacement interne. |
| --van-padding-sm | 12px | Marge interne de l’élément d’adresse. |
| --van-padding-md | 16px | Marge interne normale de page. |
| --van-padding-lg | 24px | Marge interne de section. |
| --van-padding-xl | 32px | Grande marge interne de page. |
### Typographie et formes

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --van-font-size-xs | 10px | Taille de police par défaut de l’interface. |
| --van-font-size-sm | 12px | Taille de police par défaut de l’interface. |
| --van-font-size-md | 14px | Taille de police par défaut de l’interface. |
| --van-font-size-lg | 16px | Taille de police par défaut de l’interface. |
| --van-line-height-xs | 14px | Jeton d’interligne correspondant. |
| --van-line-height-sm | 18px | Jeton d’interligne correspondant. |
| --van-line-height-md | 20px | Jeton d’interligne correspondant. |
| --van-line-height-lg | 22px | Jeton d’interligne correspondant. |
| --van-radius-sm | 2px | Rayon d’angle nommé. |
| --van-radius-md | 4px | Rayon d’angle nommé. |
| --van-radius-lg | 8px | Rayon d’angle nommé. |
| --van-radius-max | 999px | Rayon d’angle nommé. |
| --van-disabled-opacity | .5 | Opacité par défaut à l’état désactivé. |
| --van-duration-base | .3s | Durée de transition standard. |
### Ajustements de la liste d’adresses et de l’aperçu

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --van-address-list-padding | 12px 12px 80px | La valeur officielle par défaut réserve de l’espace pour le bouton d’ajout inférieur. |
| themeVars.addressListPadding | 12px | Ajustement original, car cet aperçu masque le bouton d’ajout fixe. |
| themeVars.primaryColor | #176b77 | Surcharge originale de la couleur principale associée à --van-primary-color. |
| --van-address-list-item-font-size | 13px | Taille de texte officielle pour les adresses. |
| --van-address-list-edit-icon-size | 20px | Taille officielle de l’icône de modification ; ne correspond pas à toute la zone tactile. |
## Guide complet du système de design Vant

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.

## Composants mobiles du système de design Vant avec rôles CSS explicites

### Composants mobiles avec rôles CSS explicites

> Vant cible les interfaces Web mobiles Vue. AddressList, Field et CellGroup fournissent des lignes compactes d’adresse de réception et des cellules de formulaire, plutôt qu’un tableau d’administration pour ordinateur. Le parcours du kit d’échantillons utilise ces composants natifs et affiche la destination sélectionnée dans un récapitulatif distinct.

Par défaut, le rôle principal est associé au bleu via --van-primary-color. Les rôles de succès, de danger et d’avertissement font chacun référence à des variables de couleur distinctes. L’exemple remplace volontairement la couleur principale par #176b77 via ConfigProvider ; il ne présente pas ce sarcelle comme une couleur de marque officielle de Vant. L’illustration originale inspirée du papier est décorative et ne représente aucun état de contrôle.

Consultez la spécification associée

## Système de design Vant : échelle de marges internes de quatre pixels et typographie compacte

### Échelle de marges internes de quatre pixels et typographie compacte

Vant expose des valeurs de marge intérieure de 4, 8, 12, 16, 24 et 32 pixels. Ce sont de véritables variables de base, et non des valeurs déduites d’une capture d’écran. Les éléments de la liste d’adresses utilisent le petit jeton de marge intérieure, tandis que l’aperçu qui les entoure ajoute des espacements plus grands entre les sections afin de distinguer le formulaire du récapitulatif de commande.

Les tailles de texte nommées vont de 10 à 16 pixels, avec des hauteurs de ligne associées de 14 à 22 pixels. Le texte des adresses possède sa propre variable de composant de 13px. Un produit mobile peut nécessiter un texte éditorial plus grand que ces valeurs par défaut des contrôles : le titre de l’exemple utilise une taille originale de 32px, réduite à 27px au point de rupture de la page.

Consultez la spécification associée

## Vant système de conception — L’identifiant de l’adresse pilote la sélection par bouton radio

### Un identifiant d’adresse détermine la sélection du bouton radio

AddressList reçoit des enregistrements contenant id, name, tel, address et, facultativement, isDefault. La valeur de v-model identifie l’enregistrement sélectionné. Le récapitulatif est calculé en recherchant cet identifiant dans la liste actuelle. Ainsi, la modification d’un destinataire met immédiatement à jour la destination affichée, sans nécessiter un second état de récapitulatif indépendant.

L’entrepôt indisponible est transmis via disabled-list et accompagné d’une explication claire indiquant qu’il est désactivé. Il reste visible pour apporter du contexte, mais ne peut pas être sélectionné comme destination. Le badge « Par défaut » indique que l’enregistrement est défini par défaut ; il est indépendant de la sélection actuelle et ne change pas lorsqu’une autre option radio est choisie.

Consultez la spécification associée

## Vant système de conception — Séparez le brouillon de l’enregistrement enregistré

### Conservez le brouillon séparément de l’enregistrement sauvegardé

L’événement edit fournit l’enregistrement de l’adresse. L’éditeur copie uniquement ses champs modifiables dans un brouillon réactif et stocke séparément son identifiant stable. L’action Annuler masque ce brouillon sans modifier l’adresse enregistrée. L’action Enregistrer remplace l’enregistrement correspondant ou en ajoute un nouveau en local, puis sélectionne cet identifiant.

L’exemple affiche l’édition directement sous la liste au lieu d’ouvrir une fenêtre contextuelle en bas de l’écran. L’exemple complet reste ainsi utilisable dans un document intégré. Vant propose également AddressEdit pour la saisie standardisée des adresses ; cet exemple utilise Form et Field, car ses adresses fictives évitent volontairement de présumer la structure administrative d’un pays en particulier.

1. Sélectionnez un studio et vérifiez le récapitulatif avant d’ouvrir l’éditeur.

2. Modifiez le destinataire, puis annulez pour vérifier que la ligne enregistrée n’a pas changé.

3. Rouvrez l’éditeur, enregistrez des champs valides et vérifiez le récapitulatif de la sélection.

Consultez la spécification associée

## Vant système de conception — Les règles des champs contrôlent l’événement d’envoi

### Les règles des champs contrôlent l’événement d’envoi

Le formulaire utilise validate-trigger="onSubmit". Le validateur du destinataire supprime les espaces superflus et exige au moins deux caractères. Celui du numéro de téléphone accepte un nombre raisonnable de chiffres, d’espaces, de parenthèses et de traits d’union, avec un signe plus initial facultatif. Le validateur de l’adresse exige dix caractères autres que des espaces. Ces vérifications illustrent le fonctionnement ; elles ne constituent ni une validation postale ni une validation universelle des numéros de téléphone.

Un bouton principal utilisant native-type="submit" envoie le formulaire natif. Vant émet l’événement submit uniquement lorsque les règles sont respectées. Les erreurs s’affichent à côté du champ concerné, et scroll-to-error fait défiler la page jusqu’au champ invalide. Lors du début de l’édition, l’aperçu place également le focus sur le premier champ du destinataire. Le brouillon est conservé en cas d’échec de validation.

Consultez la spécification associée

## Vant système de conception — ConfigProvider associe les valeurs camelCase aux variables CSS

### ConfigProvider associe les valeurs en camelCase aux variables CSS

L’objet theme-vars comprend primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor et addressListPadding. ConfigProvider associe ces noms aux variables --van-* correspondantes. Dans ce document isolé, le fournisseur utilise theme-vars-scope="global" afin que les alias déclarés à la racine prennent en compte le changement du rôle de couleur principal. La redéfinition du rôle et des deux valeurs du bouton principal permet de coordonner l’action native et la sélection par bouton radio.

Le passage de la propriété theme de light à dark met à jour le thème des composants de Vant. La page doit toujours définir son propre arrière-plan et ses propres couleurs de texte à l’aide des variables de thème ; le fournisseur, à lui seul, ne définit pas les couleurs de tous les éléments de l’application. Les échantillons de papier décoratifs conservent volontairement leurs couleurs de matière dans les deux thèmes.

Consultez la spécification associée

## Vant système de conception — Une action fixe sur mobile nécessite une décision d’intégration

### Une action fixe sur mobile nécessite une décision d’intégration

AddressList réserve normalement quatre-vingts pixels de marge intérieure en bas pour son bouton d’ajout fixe. L’aperçu définit show-add-button sur false et fournit un bouton classique intégré au flux de la page. Il remplace également addressListPadding par douze pixels, évitant ainsi à la fois une action fixe isolée et une zone vide inexpliquée en bas de l’exemple intégré.

Sur grand écran, la liste et le récapitulatif des matières occupent deux colonnes. En dessous du point de rupture d’origine de 680px, elles s’empilent. La hauteur native height:100% de AddressList est explicitement réinitialisée à height:auto afin que le panneau s’adapte à son contenu au lieu de chevaucher la ligne suivante de la grille. Aucune hauteur minimale globale de fenêtre n’est appliquée : la page parente peut donc dimensionner le document intégré selon son contenu. Les noms des adresses passent à la ligne sur les écrans étroits plutôt que d’élargir la page.

Consultez la spécification associée

## Vant système de conception — Un focus visible et des résultats locaux explicites

### Un focus visible et des résultats locaux explicites

La réinitialisation de base de Vant supprime les contours de focus par défaut. La feuille de style de la page rétablit un anneau de focus-visible de trois pixels sur les boutons, les champs de saisie, les zones de texte et les contrôles dotés d’un attribut tabindex. Il s’agit d’un ajout au niveau de l’application, et non de l’affirmation qu’une simple importation de bibliothèque suffit à garantir l’accessibilité. Le sélecteur de thème possède un nom accessible et un libellé visible.

Un message d’état signale l’enregistrement local ou la sélection d’une destination. Il précise explicitement qu’aucune livraison n’a été réservée. Cet exemple ne comporte ni point de terminaison de paiement, ni stockage, ni effet externe. Un véritable processus de paiement nécessiterait la validation de l’adresse côté serveur, la vérification de l’éligibilité à la livraison et une confirmation finale avant l’achat.

- Expliquez visiblement pourquoi les adresses indisponibles le sont, au lieu de les supprimer sans explication.

- Conservez le brouillon après l’échec de l’envoi afin que l’utilisateur puisse corriger le champ concerné.

- Indiquez si une action modifie uniquement la sélection locale ou réserve réellement une livraison.

Consultez la spécification associée

## Vant système de conception — Importez la locale et les styles des composants

### Importez la langue et les styles des composants

Le SFC complet importe ses composants localement. Le fichier d’entrée configure la locale anglaise avec Locale.use et importe vant/lib/index.css avant la feuille de style de mise en page d’origine. Le paquet vérifié est Vant 4.10.2 avec Vue 3 ; le suffixe .mjs de l’import de la locale anglaise correspond au fichier ESM installé.

L’aperçu autonome intègre ses JavaScript, CSS et sa police d’icônes au document. Après avoir conservé la police WOFF2 intégrée, il supprime la solution de repli WOFF distante inutilisée ; l’exemple ne dépend donc pas d’une requête de police tierce. Les applications de production doivent appliquer leurs propres règles de bundling et de gestion des ressources plutôt que de copier une URL de démonstration hébergée.

Consultez la spécification associée

## Exemples de composants du système de design Vant

### Sélection d’adresse et modification avec validation

SFC Vue complet utilisant AddressList, Form, Field, ConfigProvider et un brouillon contrôlé.

```
<script setup>
import {ref,reactive,computed,nextTick} from 'vue';
import {ConfigProvider,AddressList,Button,Form,Field,CellGroup,Tag,Switch,NoticeBar} from 'vant';
const list=ref([{id:'studio',name:'Alex Morgan',tel:'+44 20 7946 0101',address:'Studio 4, 18 Paper Street, London',isDefault:true},{id:'workshop',name:'Jules Chen',tel:'+44 20 7946 0122',address:'Workshop B, 52 Clay Road, London'}]);
const disabledList=[{id:'archive',name:'Sam Rivera',tel:'+44 20 7946 0133',address:'Old warehouse, 8 Mill Lane, London'}];
const chosen=ref('studio'),editing=ref(false),editingId=ref(null),notice=ref(''),dark=ref(false),formRef=ref();
const draft=reactive({name:'',tel:'',address:''});
const selected=computed(()=>list.value.find(x=>x.id===chosen.value));
const themeVars={primaryColor:'#176b77',addressListPadding:'12px',buttonPrimaryBackground:'#176b77',buttonPrimaryBorderColor:'#176b77'};
async function edit(item){editingId.value=item?.id||null;Object.assign(draft,item?{name:item.name,tel:item.tel,address:item.address}:{name:'',tel:'',address:''});editing.value=true;notice.value='';await nextTick();formRef.value?.resetValidation();document.querySelector('[name="recipient"]')?.focus();}
function save(){const value={id:editingId.value||`local-${Date.now()}`,name:draft.name.trim(),tel:draft.tel.trim(),address:draft.address.trim()};if(editingId.value)list.value=list.value.map(x=>x.id===editingId.value?{...x,...value}:x);else list.value.push(value);chosen.value=value.id;editing.value=false;notice.value='Address saved in this local preview.';}
function confirm(){notice.value=`Selected ${selected.value.name} at ${selected.value.address}. No delivery was booked.`;}
const nonempty=v=>v.trim().length>=2;
const phone=v=>/^\+?[\d ()-]{7,22}$/.test(v.trim());
</script>
<template><ConfigProvider theme-vars-scope="global" :theme="dark?'dark':'light'" :theme-vars="themeVars"><main class="delivery" :class="{dark}"><header><div><p class="eyebrow">VANT · MOBILE COMMERCE</p><h1>A destination for your sample kit.</h1><p class="intro">Choose a studio, update a recipient or add a local address.</p></div><label class="mode"><span>Dark</span><Switch v-model="dark" size="22px" aria-label="Dark theme" /></label></header><div class="columns"><section class="address-panel" aria-label="Delivery addresses"><div class="section-heading"><h2>Delivery address</h2><Tag plain type="primary">{{list.length}} available</Tag></div><AddressList v-model="chosen" :list="list" :disabled-list="disabledList" disabled-text="Outside the sample delivery area" default-tag-text="Default" :show-add-button="false" @edit="edit" @select="notice=''" /><div class="actions"><Button plain block type="primary" @click="edit()">Add a local address</Button></div></section><aside><section class="kit"><div class="paper-samples" aria-hidden="true"><i></i><i></i><i></i></div><p class="eyebrow">MATERIAL LIBRARY</p><h2>Paper & pigment kit</h2><p>Six paper stocks. Three print finishes. One place to compare them.</p><dl><div><dt>Recipient</dt><dd>{{selected?.name}}</dd></div><div><dt>Destination</dt><dd>{{selected?.address}}</dd></div></dl><Button block type="primary" @click="confirm">Use this address</Button><p class="local-note">Selection only. Nothing is purchased or shipped.</p></section></aside></div><section v-if="editing" class="editor"><h2>{{editingId?'Edit recipient':'Add an address'}}</h2><Form ref="formRef" validate-trigger="onSubmit" label-align="top" scroll-to-error @submit="save"><CellGroup inset><Field v-model="draft.name" name="recipient" label="Recipient" placeholder="Full name" :rules="[{validator:nonempty,message:'Enter at least two characters.'}]" /><Field v-model="draft.tel" name="telephone" type="tel" label="Telephone" placeholder="+44 20 7946 0100" :rules="[{validator:phone,message:'Use 7–22 characters: digits, spaces, +, brackets or hyphens.'}]" /><Field v-model="draft.address" name="address" type="textarea" rows="2" autosize label="Address" placeholder="Building, street and city" :rules="[{validator:v=>v.trim().length>=10,message:'Enter a complete address of at least ten characters.'}]" /></CellGroup><div class="form-actions"><Button type="primary" native-type="submit">Save locally</Button><Button native-type="button" @click="editing=false">Cancel</Button></div></Form></section><NoticeBar v-if="notice" wrapable :scrollable="false" color="var(--van-primary-color)" background="var(--van-background-2)" class="result" role="status">{{notice}}</NoticeBar></main></ConfigProvider></template>
```

Référence du code

- La valeur sélectionnée est un identifiant d’adresse, et non sa position dans le tableau.

- Le bouton fixe d’ajout d’AddressList est masqué ; un composant Button intégré au flux ouvre l’éditeur.

- La soumission du formulaire n’a lieu qu’après validation des règles de Field.

### Page adaptative et focus visible

La mise en page d’origine, divisée sur ordinateur, devient un parcours de livraison sur mobile.

```
*{box-sizing:border-box}body{margin:0;background:#f7f8fa;color:#323233}.delivery{padding:32px;max-width:1080px;margin:auto;background:var(--van-background);color:var(--van-text-color)}.delivery.dark{background:var(--van-background);color:var(--van-text-color)}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--van-text-color-2)}h1{font-size:32px;line-height:1.2;margin:12px 0;max-width:550px}h2{font-size:18px;line-height:24px;margin:0 0 12px}.intro{font-size:15px;line-height:24px;color:var(--van-text-color-2)}.mode{display:flex;gap:8px;align-items:center;font-size:12px}.columns{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.section-heading{display:flex;justify-content:space-between;align-items:center;padding:0 12px}.section-heading h2{margin:0}.actions{padding:0 12px}.kit{background:var(--van-background-2);padding:24px;border-radius:8px}.kit p{line-height:1.6}.paper-samples{height:130px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:24px;background:#e9edef;border-radius:4px;overflow:hidden}.paper-samples i{height:90px;width:90px;background:#d6b59b;box-shadow:0 4px 8px #0001;transform:rotate(-12deg);margin-right:-25px}.paper-samples i:nth-child(2){background:#efdfbe;transform:rotate(2deg)}.paper-samples i:nth-child(3){background:#94adb1;transform:rotate(16deg)}dl{font-size:14px;line-height:20px;margin:24px 0}dl div{display:grid;grid-template-columns:90px 1fr;margin:12px 0;gap:12px}dt{color:var(--van-text-color-2)}dd{margin:0}.local-note{font-size:12px;color:var(--van-text-color-2);margin-bottom:0}.editor{max-width:640px;margin-top:32px}.editor h2{margin-left:16px}.form-actions{display:flex;gap:12px;margin:16px}.result{margin-top:24px;border-radius:8px}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #176b77!important;outline-offset:3px}@media(max-width:680px){.delivery{padding:24px 12px}.columns{grid-template-columns:1fr}header{gap:8px;margin-bottom:24px}h1{font-size:27px}.mode{padding-top:4px}.kit{padding:20px}.paper-samples{height:110px}.van-address-item__name{white-space:normal}}

.delivery .van-address-list{height:auto}
```

Référence du code

- La géométrie des composants provient de Vant ; le point de rupture de page à 680px relève d’un choix propre à l’application.

- L’aperçu rétablit un indicateur de focus visible, car la réinitialisation de base supprime les contours par défaut.

## Configuration de l’agent pour le système de design Vant

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

Vérifié avec Vue 3 et Vant 4.10.2. L’exemple ne stocke aucune adresse en dehors de son état en mémoire.

```
// Create the project first:
// npm create vite@latest vant-specimen -- --template vue
// cd vant-specimen && npm install
// In a Vite Vue 3 project:
// npm install vant@4.10.2
// Save the complete SFC as App.vue and the supplied layout as style.css.
import {createApp} from 'vue';
import {Locale} from 'vant';
import enUS from 'vant/es/locale/lang/en-US.mjs';
import 'vant/lib/index.css';
import './style.css';
import App from './App.vue';
Locale.use('en-US',enUS);
createApp(App).mount('#app');
// index.html must contain <div id="app"></div>.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

### Un prompt pour votre projet

```
Partez du sélecteur d’adresse du kit d’exemple Vant 4.10.2. Conservez AddressList natif et le parcours de modification Form/Field pour ajouter ou modifier une adresse locale, avec la validation des champs et la gestion de l’adresse sélectionnée. Conservez la configuration de Locale, le module en-US, le périmètre du thème de ConfigProvider et l’adaptation d’AddressList à la hauteur du contenu. Une annulation ne doit pas remplacer une adresse existante ; une validation réussie met à jour uniquement la collection d’adresses locale. N’ajoutez aucune affirmation concernant la réussite d’un paiement ou d’un créneau de livraison à cet exemple consacré aux adresses.
```

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

Vant 4.10.2. Les jetons par défaut sont distingués des choix propres à la page d’origine. Les adresses d’exemple sont fictives ; la sélection et la modification restent locales.

- AddressList Structure des enregistrements d’adresse, sélection et API de liste désactivée.

- Form Événements de soumission et d’échec, et règles de validation.

- Field Composition native des champs de formulaire.

- ConfigProvider Variables de thème et thème sombre.

- Démarrage rapide Configuration des composants Vue et de la feuille de style.

- Locale Enregistrement de la locale anglaise.

- Source des jetons de base Couleurs de base, espacements, typographie et rayons officiels.

## Ressources associées au système de design Vant

### Vuestic UI

Fiche d’évaluation Vuestic native, avec thèmes clair et sombre vérifiés dans les sources, libellés de notation accessibles, validation de la zone de texte, moyenne calculée et état enregistré qui conserve l’évaluation terminée.

### 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.


- [Référence de mise en œuvre](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Source](https://github.com/youzan/vant/blob/main/packages/vant/src/style/var.less)
- [Source](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Consultez la spécification associée](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [Consultez la spécification associée](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Consultez la spécification associée](https://vant-ui.github.io/vant/#/en-US/form)
- [Consultez la spécification associée](https://vant-ui.github.io/vant/#/en-US/quickstart)
- [Référence du code](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Référence du code](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [AddressList Structure des enregistrements d’adresse, sélection et API de liste désactivée.](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Form Événements de soumission et d’échec, et règles de validation.](https://vant-ui.github.io/vant/#/en-US/form)
- [Field Composition native des champs de formulaire.](https://vant-ui.github.io/vant/#/en-US/field)
- [ConfigProvider Variables de thème et thème sombre.](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [Démarrage rapide Configuration des composants Vue et de la feuille de style.](https://vant-ui.github.io/vant/#/en-US/quickstart)
- [Locale Enregistrement de la locale anglaise.](https://vant-ui.github.io/vant/#/en-US/locale)
- [Source des jetons de base Couleurs de base, espacements, typographie et rayons officiels.](https://github.com/youzan/vant/blob/main/packages/vant/src/style/var.less)