Interfaccia utente multipiattaforma e mobile · Nuova risorsa
sistema di design Vant.
Un flusso mobile di selezione dell’indirizzo realizzato con Vant 4: variabili CSS reali, identità dell’indirizzo controllata, convalida dei campi, cambio di tema e salvataggio esplicitamente limitato al dispositivo.
Variabili CSS 4.10.2 di Vant, lette dal foglio di stile base installato. L’anteprima applica una variante primaria originale color verde petrolio tramite ConfigProvider; i ruoli predefiniti qui sotto sono identificati esplicitamente.
Componenti per dispositivi mobili del sistema di design Vant con ruoli CSS espliciti
Componenti per dispositivi mobili con ruoli CSS espliciti
Vant è destinato alle interfacce web mobili Vue. AddressList, Field e CellGroup offrono righe compatte per gli indirizzi di consegna e celle per i moduli, invece di una tabella amministrativa desktop. Il flusso del kit campione usa questi componenti nativi e mostra la destinazione selezionata in un riepilogo separato.
Il ruolo primario è impostato per impostazione predefinita sul blu tramite --van-primary-color. I ruoli di esito positivo, pericolo e avviso fanno ciascuno riferimento a variabili cromatiche distinte. L’esempio cambia deliberatamente il colore primario in #176b77 tramite ConfigProvider; non definisce questo verde petrolio come colore ufficiale del brand Vant. La grafica originale della carta è decorativa e non rappresenta lo stato di alcun controllo.
sistema di design Vant: la scala di spaziatura a incrementi di quattro pixel e la tipografia compatta
La scala di spaziatura a incrementi di quattro pixel e la tipografia compatta
Vant espone valori di spaziatura di 4, 8, 12, 16, 24 e 32 pixel. Si tratta di variabili di base effettive, non dedotte da uno screenshot. Gli elementi dell’elenco indirizzi usano il token di spaziatura ridotta, mentre l’anteprima circostante aggiunge spazi più ampi tra le sezioni per distinguere il modulo dal riepilogo dell’ordine.
Le dimensioni del testo denominate vanno da 10 a 16 pixel, con interlinee abbinate da 14 a 22 pixel. Il testo degli indirizzi ha una propria variabile del componente da 13px. Un prodotto per dispositivi mobili potrebbe aver bisogno di testo editoriale più grande rispetto a questi valori predefiniti dei controlli: il titolo di esempio usa una dimensione originale di 32px, ridotta a 27px in corrispondenza del breakpoint della pagina.
sistema di design Vant: la selezione radio è determinata dall’ID dell’indirizzo
La selezione radio è determinata dall’ID dell’indirizzo
AddressList riceve record dell’elenco con id, name, tel, address e isDefault facoltativo. Il valore di v-model identifica il record selezionato. Il riepilogo viene calcolato cercando quell’ID nell’elenco corrente, così modificare il destinatario aggiorna immediatamente la destinazione visualizzata senza introdurre un secondo stato riepilogativo indipendente.
Il magazzino non disponibile viene passato tramite disabled-list e accompagnato da una spiegazione chiara del testo disabilitato. Rimane visibile per fornire contesto, ma non può diventare la destinazione selezionata. L’etichetta Default indica che il record è quello predefinito; è distinta dalla selezione corrente e non cambia quando si sceglie un’altra opzione radio.
sistema di design Vant: tieni separata la bozza dal record salvato
Tieni separata la bozza dal record salvato
L’evento edit fornisce il record dell’indirizzo. L’editor copia solo i campi modificabili in una bozza reattiva e memorizza separatamente il suo ID stabile. Annulla nasconde la bozza senza modificare l’indirizzo salvato. Salva sostituisce il record corrispondente o ne aggiunge uno nuovo in locale, poi seleziona quell’ID.
L’esempio mostra l’editor in linea sotto l’elenco, invece di aprire un popup inferiore. Così l’intero esempio rimane utilizzabile in un documento incorporato. Vant offre anche AddressEdit per l’inserimento standardizzato degli indirizzi; questo esempio usa Form e Field perché gli indirizzi campione evitano deliberatamente di presupporre i dati amministrativi di un singolo Paese.
Seleziona uno studio e controlla il riepilogo prima di aprire Modifica.
Cambia il destinatario, poi annulla per verificare che la riga salvata non sia cambiata.
Riapri l’editor, salva i campi validi e controlla il riepilogo selezionato.
sistema di design Vant: le regole di Field regolano l’evento submit
Le regole di Field regolano l’evento submit
Il Form usa validate-trigger="onSubmit". Il validatore del destinatario rimuove gli spazi iniziali e finali e richiede almeno due caratteri. Il validatore del telefono accetta un intervallo ragionevole di cifre, spazi, parentesi e trattini, con un segno più iniziale facoltativo. Il validatore dell’indirizzo richiede dieci caratteri non composti da spazi. Questi controlli illustrano il funzionamento, ma non costituiscono una verifica postale né una convalida telefonica universale.
Un Button primario con native-type="submit" invia il modulo nativo. Vant emette submit solo se le regole sono rispettate. Gli errori compaiono accanto al Field pertinente e scroll-to-error porta in vista il campo non valido. L’anteprima sposta inoltre il focus sul primo input del destinatario quando inizia la modifica. La bozza viene mantenuta in caso di errori di convalida.
sistema di design Vant: ConfigProvider associa i valori camelCase alle variabili CSS
ConfigProvider associa i valori camelCase alle variabili CSS
L’oggetto theme-vars include primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor e addressListPadding. ConfigProvider associa questi nomi alle corrispondenti variabili --van-*. In questo documento isolato, il provider usa theme-vars-scope="global", così gli alias dichiarati nella radice vengono risolti in base al ruolo primario modificato. La ridefinizione del ruolo e di entrambi i valori del pulsante primario mantiene coordinati l’azione nativa e la selezione radio.
Passare la prop theme da light a dark aggiorna il tema dei componenti di Vant. La pagina deve comunque definire sfondo e testo usando le variabili del tema: impostare solo il provider non applica i colori a ogni elemento dell'applicazione. I campioni decorativi di carta mantengono intenzionalmente i propri colori in entrambi i temi.
sistema di design Vant: un'azione mobile fissa richiede una decisione sull'incorporamento
Un'azione mobile fissa richiede una decisione sull'incorporamento
AddressList riserva normalmente ottanta pixel di padding inferiore per il pulsante fisso di aggiunta. L'anteprima imposta show-add-button su false e fornisce un normale Button nel flusso. Modifica anche addressListPadding impostandolo a dodici pixel, evitando sia un'azione fissa scollegata dal contenuto sia un'area vuota ingiustificata in fondo all'esempio incorporato.
Sugli schermi ampi, l'elenco e il riepilogo dei materiali formano due colonne. Sotto il breakpoint originale di 680px, vengono impilati. L'altezza nativa di AddressList, height:100%, viene reimpostata esplicitamente su height:auto, così il pannello si adatta al contenuto invece di sovrapporsi alla riga successiva della griglia. Non viene usata un'altezza minima globale del viewport, quindi la pagina contenitore può dimensionare il documento incorporato in base al contenuto. Sugli schermi stretti, i nomi degli indirizzi vanno a capo invece di allargare la pagina.
sistema di design Vant: focus visibile e risultati locali espliciti
Focus visibile e risultati locali espliciti
Il reset di base di Vant rimuove i contorni di focus predefiniti. Il foglio di stile della pagina ripristina un anello di focus-visible di tre pixel su pulsanti, campi di input, aree di testo e controlli con tabindex. Si tratta di un'aggiunta a livello di applicazione, non dell'affermazione che l'import di una libreria, da solo, completi il lavoro sull'accessibilità. L'interruttore del tema ha un nome accessibile e un'etichetta visibile.
Una notifica di stato registra un salvataggio locale o la selezione di una destinazione. Specifica chiaramente che non è stata prenotata alcuna consegna. L'esempio non include un endpoint di checkout, archiviazione o effetti collaterali esterni. Un checkout reale richiederebbe la convalida dell'indirizzo lato server, la verifica della disponibilità della consegna e una revisione finale prima dell'acquisto.
Spiega chiaramente perché gli indirizzi non disponibili non sono selezionabili, anziché eliminarli senza avviso.
Mantieni la bozza dopo un invio non valido, così l'utente può correggere un campo.
Descrivi se un'azione modifica una selezione locale o prenota effettivamente una consegna.
sistema di design Vant: importa la lingua e gli stili dei componenti
Importa la lingua e gli stili dei componenti
L'SFC completo importa i componenti localmente. Il file di ingresso installa la lingua inglese tramite Locale.use e importa vant/lib/index.css prima del foglio di stile originale del layout. Il pacchetto verificato è Vant 4.10.2 con Vue 3; il suffisso .mjs nell'import della lingua inglese corrisponde al file ESM installato.
L'anteprima autonoma incorpora nel documento JavaScript, CSS e il font delle icone. Rimuove il fallback WOFF remoto inutilizzato dopo aver mantenuto il font WOFF2 incorporato, così l'esempio non dipende da una richiesta di font a terze parti. Le applicazioni di produzione dovrebbero usare il proprio bundler e le proprie regole per gli asset, invece di copiare l'URL di una demo ospitata.
La geometria dei componenti proviene da Vant; il breakpoint della pagina a 680px è una scelta applicativa.
L'anteprima ripristina un anello di focus visibile perché il reset di base rimuove i contorni predefiniti.
04
Configurazione dell'agente per il sistema di design Vant
Punto di partenza per l’implementazione
Verificato con Vue 3 e Vant 4.10.2. L'esempio non conserva indirizzi al di fuori dello stato in memoria.
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 per il tuo progetto
Prompt per l’agente
Parti dal selettore di indirizzi sample-kit di Vant 4.10.2. Mantieni AddressList nativo e il flusso di modifica con Form/Field per aggiungere o modificare un indirizzo locale, inclusi la convalida dei campi e lo stato dell'indirizzo selezionato. Mantieni la configurazione di Locale, il modulo en-US, l'ambito del tema di ConfigProvider e l'adattamento di AddressList all'altezza del contenuto. L'annullamento non deve sostituire un indirizzo esistente; una convalida riuscita aggiorna solo la raccolta locale degli indirizzi. Non aggiungere affermazioni di successo relative a pagamenti o fasce orarie di consegna a questo esempio, dedicato ai soli indirizzi.
05
Fonti e ambito del sistema di design Vant
Vant 4.10.2. I token predefiniti sono distinti dalle scelte originali della pagina. Gli indirizzi di esempio sono fittizi; selezione e modifica avvengono localmente.
