Interfaz de usuario multiplataforma y móvil · Nuevo recurso
Sistema de diseño Vant.
Un flujo móvil de selección de dirección creado con Vant 4: variables reales de CSS, identidad de dirección controlada, validación de campos, cambio de tema y guardado explícitamente local.
Vant nativo 4.10.2 con Vue 3. La ilustración del papel y la composición que la rodea son originales. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Vant
Variables CSS de Vant 4.10.2, consultadas en la hoja de estilos base instalada. La vista previa aplica un color primario verde azulado original mediante ConfigProvider; los roles predeterminados que aparecen a continuación siguen identificados explícitamente.
Componentes móviles del sistema de diseño Vant con roles CSS explícitos
Componentes móviles con roles CSS explícitos
Vant está dirigido a interfaces web móviles con Vue. Sus componentes AddressList, Field y CellGroup ofrecen filas compactas de direcciones de entrega y celdas de formulario, en lugar de una tabla de administración de escritorio. El flujo del kit de muestra usa esos componentes nativos y muestra el destino seleccionado en un resumen independiente.
De forma predeterminada, el rol principal es azul mediante --van-primary-color. El éxito, el peligro y la advertencia hacen referencia a variables de color independientes. La muestra cambia deliberadamente el color principal a #176b77 mediante ConfigProvider; no presenta ese verde azulado como un color oficial de marca de Vant. La ilustración original del papel es decorativa y no representa el estado de ningún control.
Sistema de diseño Vant: escala de espaciado interno de cuatro píxeles y tipografía compacta
Escala de espaciado interno de cuatro píxeles y tipografía compacta
Vant ofrece valores de espaciado interno de 4, 8, 12, 16, 24 y 32 píxeles. Son variables base reales, no valores inferidos de una captura de pantalla. Los elementos de la lista de direcciones usan el token de espaciado pequeño, mientras que la vista previa añade espacios más amplios entre secciones para diferenciar el formulario del resumen del pedido.
Los tamaños de texto definidos van de 10 a 16 píxeles, con alturas de línea correspondientes de 14 a 22 píxeles. El texto de dirección tiene su propia variable de componente de 13px. Un producto móvil puede necesitar texto editorial más grande que esos valores predeterminados de los controles: el encabezado de la muestra tiene un tamaño original de 32px, que se reduce a 27px en el punto de interrupción de la página.
Sistema de diseño Vant: un ID de dirección controla la selección de radio
Un ID de dirección controla la selección de radio
AddressList recibe registros de lista con id, name, tel, address y el campo opcional isDefault. El valor de v-model identifica el registro seleccionado. El resumen se calcula buscando ese ID en la lista actual, de modo que editar un destinatario actualiza de inmediato el destino mostrado, sin necesidad de mantener un segundo estado de resumen independiente.
El almacén no disponible se pasa mediante disabled-list y se le añade una explicación clara en disabled-text. Permanece visible como contexto, pero no puede convertirse en el destino seleccionado. La insignia «Predeterminada» identifica el estado predeterminado del registro; es independiente de la selección actual y no cambia simplemente porque se elija otra opción de radio.
Sistema de diseño Vant: mantén el borrador separado del registro guardado
Mantén el borrador separado del registro guardado
El evento de edición proporciona el registro de dirección. El editor copia solo sus campos editables en un borrador reactivo y guarda por separado su ID estable. Al cancelar, oculta este borrador sin modificar la dirección guardada. Al guardar, reemplaza el registro correspondiente o añade uno nuevo local y, después, selecciona ese ID.
El ejemplo muestra el editor en línea, debajo de la lista, en lugar de abrir una ventana emergente inferior. Así, el ejemplo completo se puede usar en un documento incrustado. Vant también ofrece AddressEdit para introducir direcciones de forma estandarizada; este ejemplo usa Form y Field porque sus direcciones de muestra evitan deliberadamente presuponer los datos administrativos de un país concreto.
Selecciona un estudio y comprueba el resumen antes de abrir Editar.
Cambia el destinatario y luego cancela para confirmar que la fila guardada no haya cambiado.
Vuelve a abrir el editor, guarda campos válidos y comprueba el resumen seleccionado.
Sistema de diseño Vant: las reglas de los campos controlan el evento de envío
Las reglas de los campos controlan el evento de envío
Form usa validate-trigger="onSubmit". El validador del destinatario elimina los espacios en blanco sobrantes y exige al menos dos caracteres. El validador del teléfono acepta un rango moderado de dígitos, espacios, paréntesis y guiones, con un signo más inicial opcional. El validador de la dirección exige diez caracteres que no sean espacios en blanco. Estas comprobaciones ilustran el funcionamiento; no verifican direcciones postales ni validan teléfonos de forma universal.
Un Button principal con native-type="submit" envía el formulario nativo. Vant emite submit solo si se superan las reglas. Los errores aparecen junto al Field correspondiente y scroll-to-error desplaza el campo no válido hasta dejarlo visible. La vista previa también enfoca la primera entrada del destinatario al iniciar la edición. El borrador se conserva si la validación falla.
Sistema de diseño Vant: ConfigProvider asigna valores camelCase a variables de CSS
ConfigProvider asigna valores CamelCase a variables CSS
El objeto theme-vars incluye primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor y addressListPadding. ConfigProvider asigna esos nombres a las variables --van-* correspondientes. En este documento aislado, el proveedor usa theme-vars-scope="global" para que los alias declarados en la raíz se resuelvan según el rol principal modificado. Sobrescribir el rol y ambos valores del botón principal mantiene coordinados la acción nativa y el estado de selección de radio.
Al cambiar la propiedad theme entre light y dark, se actualiza el tema de los componentes de Vant. La página aún necesita sus propias declaraciones de fondo y texto mediante las variables del tema; configurar el proveedor por sí solo no aplica estilos a todos los elementos de la aplicación. Las muestras decorativas de papel mantienen intencionadamente sus colores de material en ambos temas.
Sistema de diseño Vant: una acción fija para móviles requiere decidir cómo incrustarla
Una acción fija para móviles requiere decidir cómo incrustarla
AddressList normalmente reserva ochenta píxeles de relleno inferior para su botón fijo de adición. La vista previa establece show-add-button en false y proporciona un Button normal en el flujo del contenido. También cambia addressListPadding a doce píxeles para evitar tanto una acción fija separada como un espacio vacío e inexplicable al pie del ejemplo incrustado.
En una pantalla ancha, la lista y el resumen de materiales se muestran en dos columnas. Por debajo del punto de quiebre original de 680px, se apilan. La altura nativa height:100% de AddressList se restablece explícitamente a height:auto para que el panel se ajuste a su contenido en lugar de superponerse a la siguiente fila de la cuadrícula. No se establece una altura mínima global de la ventana gráfica, de modo que la página principal pueda dimensionar el documento incrustado según su contenido. Los nombres de las direcciones se ajustan en pantallas estrechas en vez de ensanchar la página a la fuerza.
Sistema de diseño Vant: foco visible y resultados locales explícitos
Foco visible y resultados locales explícitos
El restablecimiento base de Vant elimina los contornos de foco predeterminados. La hoja de estilos de la página que lo acompaña vuelve a añadir un anillo de foco visible de tres píxeles a botones, campos de entrada, áreas de texto y controles con tab-index. Es una mejora a nivel de aplicación; no se afirma que importar una biblioteca por sí solo complete el trabajo de accesibilidad. El selector de tema tiene un nombre accesible y una etiqueta visible.
Un aviso de estado registra un guardado local o la selección de un destino. Indica explícitamente que no se ha reservado ninguna entrega. El ejemplo no tiene ningún punto de acceso de pago, almacenamiento ni efecto externo. Un proceso de pago real requeriría validar la dirección en el servidor, comprobar la elegibilidad para la entrega y realizar una revisión final antes de la compra.
Explica de forma visible por qué las direcciones no están disponibles, en lugar de eliminarlas sin indicarlo.
Conserva el borrador tras un envío no válido para que el usuario pueda corregir un campo.
Indica si una acción cambia la selección local o si realmente reserva una entrega.
Sistema de diseño Vant: importa la configuración regional y los estilos de los componentes
Importa la configuración regional y los estilos de los componentes
El SFC completo importa sus componentes localmente. El archivo de entrada instala la configuración regional en inglés mediante Locale.use e importa vant/lib/index.css antes de la hoja de estilos del diseño original. El paquete verificado es Vant 4.10.2 con Vue 3; el sufijo .mjs de la importación de la configuración regional en inglés coincide con el archivo ESM instalado.
La vista previa independiente incluye en el documento su JavaScript, CSS y la fuente de iconos. Elimina la alternativa WOFF remota que no se usa después de conservar la fuente WOFF2 incluida, de modo que el ejemplo no dependa de una solicitud a una fuente de terceros. Las aplicaciones de producción deben usar su propio empaquetador y sus propias políticas de recursos, en lugar de copiar una URL de demostración alojada.
La geometría de los componentes procede de Vant; el punto de ruptura de página de 680px es una decisión de la aplicación.
La vista previa restaura un indicador de foco visible porque el restablecimiento base elimina los contornos predeterminados.
04
Configuración del agente del sistema de diseño Vant
Punto de partida para la implementación
Verificado con Vue 3 y Vant 4.10.2. El ejemplo no guarda direcciones fuera de su estado en 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
Una instrucción para tu proyecto
Instrucción para el agente
Parte del selector de direcciones del kit de ejemplo de Vant 4.10.2. Conserva AddressList nativo y el flujo de edición Form/Field para añadir o modificar una dirección local, incluida la validación de campos y el estado de la dirección seleccionada. Mantén la configuración de Locale, el módulo en-US, el ámbito del tema de ConfigProvider y la adaptación de AddressList a la altura del contenido. La cancelación no debe sustituir una dirección existente; la validación correcta solo actualiza la colección local de direcciones. No añadas afirmaciones de éxito sobre pagos o franjas de entrega a este ejemplo, que solo abarca direcciones.
05
Fuentes y alcance del sistema de diseño Vant
Vant 4.10.2. Se distinguen los tokens predeterminados de las decisiones originales de la página. Las direcciones de ejemplo son ficticias; la selección y la edición se mantienen en el ámbito local.
