Plattformübergreifende und mobile Benutzeroberflächen · Neue Ressource
Vant-Designsystem.
Ein mobiler Ablauf zur Adressauswahl mit Vant 4: echten CSS-Variablen, kontrollierter Adressidentität, Feldvalidierung, Theme-Wechsel und explizitem Speichern ausschließlich lokal.
Native Vant 4.10.2 mit Vue 3. Die Papiergrafik und das umgebende Layout sind eigens gestaltet. · Implementierungsreferenz
02
Vant-Designsystem – Designreferenz
Variablen von Vant 4.10.2 CSS, aus dem installierten Basis-Stylesheet ausgelesen. Die Vorschau wendet über ConfigProvider eine eigens festgelegte primäre Türkisfarbe an; die Standardrollen unten sind ausdrücklich als solche gekennzeichnet.
Vant-Designsystem: mobile Komponenten mit expliziten Rollen für CSS
Mobile Komponenten mit expliziten Rollen für CSS
Vant ist für mobile Weboberflächen mit Vue vorgesehen. AddressList, Field und CellGroup bieten kompakte Zeilen für Empfängeradressen und Formularfelder statt einer Desktop-Verwaltungstabelle. Der Ablauf im Beispielpaket nutzt diese nativen Komponenten und zeigt das ausgewählte Ziel in einer separaten Zusammenfassung an.
Die Primärrolle ist standardmäßig über --van-primary-color auf Blau gesetzt. Erfolg, Gefahr und Warnung verweisen jeweils auf eigene Farbvariablen. In diesem Beispiel wird die Primärfarbe über ConfigProvider bewusst auf #176b77 geändert; dieses Türkis wird nicht als offizielle Markenfarbe von Vant bezeichnet. Die eigens gestaltete Papiergrafik dient der Dekoration und vermittelt keinen Status eines Bedienelements.
Vant-Designsystem: Die Vier-Pixel-Abstandsskala und kompakte Schriftgrößen
Die Vier-Pixel-Abstandsskala und kompakte Schriftgrößen
Vant stellt Abstände von 4, 8, 12, 16, 24 und 32 Pixeln bereit. Es handelt sich um tatsächliche Basisvariablen, nicht um Werte, die aus einem Screenshot abgeleitet wurden. Die Elemente der Adressliste verwenden den Token für kleine Abstände. Die umgebende Vorschau ergänzt größere Abstände zwischen Abschnitten, damit Formular und Bestellübersicht klar voneinander getrennt sind.
Die benannten Textgrößen reichen von 10 bis 16 Pixel, die zugehörigen Zeilenhöhen von 14 bis 22 Pixel. Für Adresstext gibt es eine eigene Komponentenvariable mit 13 px. In einem mobilen Produkt kann eine größere redaktionelle Schrift als diese Standardwerte für Bedienelemente erforderlich sein: Die Überschrift des Beispiels ist eigens auf 32 px ausgelegt und wird am Seitenumbruch auf 27 px verkleinert.
Vant-Designsystem: Eine Adress-ID steuert die Auswahl per Optionsfeld
Eine Adress-ID steuert die Auswahl per Optionsfeld
AddressList erhält Listeneinträge mit id, name, tel, address und optional isDefault. Der Wert von v-model gibt den ausgewählten Eintrag an. Die Zusammenfassung wird berechnet, indem anhand dieser ID der passende Eintrag in der aktuellen Liste gesucht wird. Wird ein Empfänger bearbeitet, aktualisiert sich das angezeigte Ziel sofort, ohne dass ein zweiter, unabhängiger Zusammenfassungsstatus erforderlich ist.
Das nicht verfügbare Lager wird über disabled-list übergeben und mit einer verständlichen Erklärung als deaktiviert gekennzeichnet. Es bleibt zur Orientierung sichtbar, kann aber nicht als Ziel ausgewählt werden. Das Badge „Standard“ kennzeichnet den Standardstatus des Eintrags. Es ist unabhängig von der aktuellen Auswahl und ändert sich nicht, wenn eine andere Radio-Option gewählt wird.
Designsystem von Vant: Den Entwurf vom gespeicherten Eintrag getrennt halten
Entwurf und gespeicherten Datensatz getrennt halten
Das Ereignis edit übergibt den Adressdatensatz. Der Editor kopiert nur die bearbeitbaren Felder in einen reaktiven Entwurf und speichert die unveränderliche ID separat. Beim Abbrechen wird dieser Entwurf ausgeblendet, ohne die gespeicherte Adresse zu ändern. Beim Speichern wird der passende Eintrag ersetzt oder ein neuer lokaler Eintrag angefügt. Anschließend wird dessen ID ausgewählt.
Das Beispiel zeigt den Editor direkt unter der Liste, anstatt ein Popup am unteren Bildschirmrand zu öffnen. So bleibt das vollständige Beispiel in einem eingebetteten Dokument nutzbar. Vant bietet auch AddressEdit für eine standardisierte Adresseingabe. In diesem Beispiel kommen Form und Field zum Einsatz, da die Beispieldaten bewusst keine Verwaltungsgebietsdaten eines bestimmten Landes voraussetzen.
Wähle ein Studio aus und prüfe die Zusammenfassung, bevor du auf „Bearbeiten“ klickst.
Ändere den Empfänger und brich dann ab, um zu prüfen, dass der gespeicherte Eintrag unverändert bleibt.
Öffne den Editor erneut, speichere gültige Felder und prüfe die Zusammenfassung der ausgewählten Adresse.
Designsystem von Vant: Feldregeln steuern das Submit-Ereignis
Feldregeln steuern das Submit-Ereignis
Für Form gilt validate-trigger="onSubmit". Der Validator für den Empfänger entfernt Leerzeichen am Anfang und Ende und verlangt mindestens zwei Zeichen. Der Telefonnummern-Validator akzeptiert eine begrenzte Anzahl von Ziffern, Leerzeichen, Klammern und Bindestrichen sowie ein optionales Pluszeichen am Anfang. Für die Adresse sind mindestens zehn Zeichen erforderlich, die keine Leerzeichen sind. Diese Prüfungen veranschaulichen die Funktionsweise; sie stellen weder eine postalische Verifizierung noch eine universelle Telefonnummernvalidierung dar.
Ein primärer Button mit native-type="submit" sendet das native Formular ab. Vant löst submit erst aus, wenn die Regeln erfüllt sind. Fehler werden neben dem jeweiligen Field angezeigt, und scroll-to-error bringt das ungültige Feld in den sichtbaren Bereich. Außerdem fokussiert die Vorschau beim Beginn der Bearbeitung das erste Empfänger-Eingabefeld. Bei fehlgeschlagener Validierung bleibt der Entwurf erhalten.
Designsystem von Vant: ConfigProvider ordnet CamelCase-Werte den Variablen CSS zu
ConfigProvider ordnet CamelCase-Werte den Variablen von CSS zu
Das Objekt theme-vars enthält primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor und addressListPadding. ConfigProvider ordnet diese Namen den entsprechenden --van-* Variablen zu. In diesem isolierten Dokument verwendet der Provider theme-vars-scope="global", damit Aliasse auf der Stammebene auf die geänderte Primärrolle verweisen. Die Überschreibung der Rolle und beider Primärbutton-Werte sorgt dafür, dass die native Aktion und die Radio-Auswahl aufeinander abgestimmt bleiben.
Wenn du die Theme-Prop zwischen light und dark umschaltest, wird das Komponententhema von Vant aktualisiert. Für den Seitenhintergrund und den Text sind weiterhin eigene Deklarationen mit den Theme-Variablen erforderlich. Der Provider allein gestaltet nicht jedes Element der Anwendung. Die dekorativen Papierbeispiele behalten ihre Materialfarben in beiden Themes bei.
Designsystem von Vant: Bei einer fixierten mobilen Aktion muss die Einbettung berücksichtigt werden
Bei einer fixierten mobilen Aktion muss die Einbettung berücksichtigt werden
AddressList reserviert normalerweise achtzig Pixel Abstand am unteren Rand für die fixierte Schaltfläche zum Hinzufügen. In der Vorschau wird show-add-button auf false gesetzt und stattdessen ein regulärer Button im Dokumentfluss verwendet. Außerdem wird addressListPadding auf zwölf Pixel gesetzt. So werden sowohl eine losgelöste fixierte Aktion als auch ein unerklärlicher leerer Bereich am unteren Rand des eingebetteten Beispiels vermieden.
Auf breiten Bildschirmen bilden die Liste und die Materialzusammenfassung zwei Spalten. Unterhalb des ursprünglichen Breakpoints von 680px werden sie untereinander angeordnet. Die native Einstellung height:100% von AddressList wird ausdrücklich auf height:auto zurückgesetzt, damit sich das Panel nach seinem Inhalt richtet und nicht die nächste Rasterzeile überlagert. Es wird keine globale Mindesthöhe für den Viewport festgelegt, sodass die übergeordnete Seite die Größe des eingebetteten Dokuments anhand seines Inhalts bestimmen kann. Auf schmalen Bildschirmen werden die Adressnamen umgebrochen, statt die Seite zu verbreitern.
Designsystem von Vant: Sichtbarer Fokus und klare lokale Rückmeldungen
Sichtbarer Fokus und klare lokale Rückmeldungen
Das Basis-Reset von Vant entfernt die standardmäßigen Fokusumrisse. Das zugehörige Seiten-Stylesheet fügt für Buttons, Eingabefelder, Textbereiche und Steuerelemente mit tabindex einen drei Pixel breiten Fokusindikator für sichtbare Fokussierung hinzu. Dies ist eine Ergänzung auf Anwendungsebene und keine Behauptung, dass ein Bibliotheksimport allein die Barrierefreiheit vollständig gewährleistet. Der Theme-Umschalter hat einen zugänglichen Namen und eine sichtbare Beschriftung.
Eine Statusmeldung vermerkt, dass lokal gespeichert oder ein Ziel ausgewählt wurde. Sie weist ausdrücklich darauf hin, dass keine Lieferung gebucht wurde. Das Beispiel verfügt über keinen Checkout-Endpunkt, keinen Speicher und keine externen Auswirkungen. Ein tatsächlicher Checkout würde vor dem Kauf eine serverseitige Adressvalidierung, eine Prüfung der Lieferberechtigung und eine abschließende Überprüfung erfordern.
Erkläre sichtbar, warum Adressen nicht verfügbar sind, statt sie unbemerkt zu entfernen.
Behalte den Entwurf nach einem ungültigen Submit bei, damit die Person ein Feld korrigieren kann.
Beschreibe, ob eine Aktion lediglich die lokale Auswahl ändert oder tatsächlich eine Lieferung bucht.
Designsystem von Vant: Locale und Komponenten-Styles importieren
Gebietsschema und Komponentenstile importieren
Die vollständige SFC importiert ihre Komponenten lokal. Die Einstiegsdatei bindet das englische Locale über Locale.use ein und importiert vant/lib/index.css vor dem ursprünglichen Layout-Stylesheet. Das verifizierte Paket ist Vant 4.10.2 mit Vue 3; die Endung .mjs des Imports des englischen Locale entspricht der installierten ESM-Datei.
Die eigenständige Vorschau bündelt JavaScript, CSS und die Icon-Schriftart im Dokument. Nach der Übernahme der gebündelten WOFF2-Schriftart entfernt sie den ungenutzten Remote-WOFF-Fallback, sodass das Beispiel keine Anfrage an eine Schriftart eines Drittanbieters benötigt. Produktionsanwendungen sollten ihren eigenen Bundler und ihre eigene Asset-Richtlinie verwenden, statt eine gehostete Demo-URL zu übernehmen.
Die Komponentengeometrie stammt von Vant; der Seitenumbruch bei 680px ist eine Anwendungsentscheidung.
Die Vorschau stellt einen sichtbaren Fokusring wieder her, da das Basis-Reset die Standardkonturen entfernt.
04
Vant-Designsystem-Agent – Einrichtung
Ausgangspunkt für die Implementierung
Verifiziert mit Vue 3 und Vant 4.10.2. Das Beispiel speichert keine Adresse außerhalb seines In-Memory-Zustands.
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
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie als Ausgangspunkt die Adressauswahl des Vant 4.10.2 sample-kit. Behalten Sie die native AddressList und den Bearbeitungsablauf mit Form/Field zum Hinzufügen oder Ändern einer lokalen Adresse bei, einschließlich Feldvalidierung und Status der ausgewählten Adresse. Behalten Sie die Locale-Einrichtung, das Modul en-US, den Theme-Bereich des ConfigProvider und die Anpassung der AddressList an die Inhaltshöhe bei. Beim Abbrechen darf eine vorhandene Adresse nicht ersetzt werden; eine erfolgreiche Validierung aktualisiert nur die lokale Adresssammlung. Fügen Sie diesem reinen Adressbeispiel keine Aussagen zum Erfolg von Zahlung oder Lieferzeitfenster hinzu.
05
Quellen und Geltungsbereich des Vant-Designsystems
Vant 4.10.2. Standard-Token und ursprüngliche Seitenentscheidungen sind klar voneinander abgegrenzt. Die Beispieladressen sind fiktiv; Auswahl und Bearbeitung bleiben lokal.
