Interface multiplateforme et mobile · Nouvelle ressource
Système de design Vant.
Un parcours mobile de sélection d’adresse conçu avec Vant 4 : de vraies variables CSS, une identité d’adresse contrôlée, la validation des champs, le changement de thème et un enregistrement explicitement limité au stockage local.
Vant natif 4.10.2 avec Vue 3. L’illustration papier et la mise en page environnante sont originales. · Référence de mise en œuvre
02
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.
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.
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.
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.
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.
Sélectionnez un studio et vérifiez le récapitulatif avant d’ouvrir l’éditeur.
Modifiez le destinataire, puis annulez pour vérifier que la ligne enregistrée n’a pas changé.
Rouvrez l’éditeur, enregistrez des champs valides et vérifiez le récapitulatif de la sélection.
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.
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.
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.
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.
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.
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.
04
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.
javascript
// 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 [email protected]
// 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
Prompt pour l’agent IA
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.
05
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.
