# Sistema de diseño Vant

## Vista previa de la interfaz del sistema de diseño Vant

Selecciona un destinatario, edita una dirección, valida una nueva entrada y cambia el tema del componente nativo.

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

### Roles de color predeterminados

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --van-primary-color | var(--van-blue) | Alias de acción predeterminado; el azul es #1989fa. |
| --van-success-color | var(--van-green) | Alias de éxito; el verde es #07c160. |
| --van-danger-color | var(--van-red) | Alias de peligro; el rojo es #ee0a24. |
| --van-warning-color | var(--van-orange) | Alias de advertencia; el naranja es #ff976a. |
| --van-text-color | var(--van-gray-8) | Alias de texto principal; gray-8 es #323233. |
| --van-text-color-2 | var(--van-gray-6) | Alias de texto secundario; gray-6 es #969799. |
| --van-border-color | var(--van-gray-3) | Alias de divisor; gray-3 es #ebedf0. |
| --van-background | var(--van-gray-1) | Superficie de página; gray-1 es #f7f8fa. |
| --van-background-2 | var(--van-white) | Superficie de componente; blanco es #fff. |
### Escala de espaciado interno

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --van-padding-base | 4px | Pequeño desplazamiento interno. |
| --van-padding-xs | 8px | Separación interna pequeña. |
| --van-padding-sm | 12px | Espaciado interno del elemento de dirección. |
| --van-padding-md | 16px | Margen interior normal de página. |
| --van-padding-lg | 24px | Margen interior de sección. |
| --van-padding-xl | 32px | Margen interior amplio de página. |
### Tipografía y forma

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --van-font-size-xs | 10px | Tamaño de texto predeterminado de la interfaz. |
| --van-font-size-sm | 12px | Tamaño de texto predeterminado de la interfaz. |
| --van-font-size-md | 14px | Tamaño de texto predeterminado de la interfaz. |
| --van-font-size-lg | 16px | Tamaño de texto predeterminado de la interfaz. |
| --van-line-height-xs | 14px | Token de altura de línea correspondiente. |
| --van-line-height-sm | 18px | Token de altura de línea correspondiente. |
| --van-line-height-md | 20px | Token de altura de línea correspondiente. |
| --van-line-height-lg | 22px | Token de altura de línea correspondiente. |
| --van-radius-sm | 2px | Radio de esquina definido. |
| --van-radius-md | 4px | Radio de esquina definido. |
| --van-radius-lg | 8px | Radio de esquina definido. |
| --van-radius-max | 999px | Radio de esquina definido. |
| --van-disabled-opacity | .5 | Opacidad predeterminada de estado deshabilitado. |
| --van-duration-base | .3s | Duración de transición estándar. |
### Ajustes de la lista de direcciones y la vista previa

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --van-address-list-padding | 12px 12px 80px | El valor predeterminado oficial reserva espacio para el botón de añadir situado abajo. |
| themeVars.addressListPadding | 12px | Ajuste original porque esta vista previa oculta el botón fijo para añadir. |
| themeVars.primaryColor | #176b77 | Modificación original del color principal asignada a --van-primary-color. |
| --van-address-list-item-font-size | 13px | Tamaño oficial del texto de dirección. |
| --van-address-list-edit-icon-size | 20px | Tamaño oficial del icono de edición; no corresponde a toda el área táctil. |
## Guía completa del sistema de diseño Vant

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

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

Consulta la especificación complementaria

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

Consulta la especificación complementaria

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

Consulta la especificación complementaria

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

1. Selecciona un estudio y comprueba el resumen antes de abrir Editar.

2. Cambia el destinatario y luego cancela para confirmar que la fila guardada no haya cambiado.

3. Vuelve a abrir el editor, guarda campos válidos y comprueba el resumen seleccionado.

Consulta la especificación complementaria

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

Consulta la especificación complementaria

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

Consulta la especificación complementaria

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

Consulta la especificación complementaria

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

Consulta la especificación complementaria

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

Consulta la especificación complementaria

## Vant Ejemplos de componentes del sistema de diseño

### Selección de dirección y edición validada

SFC completo de Vue que usa AddressList, Form, Field, ConfigProvider y un borrador controlado.

```
<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>
```

Referencia de código

- El valor seleccionado es un ID de dirección, no una posición en la matriz.

- Se oculta el botón fijo para añadir de AddressList; un Button integrado en el flujo abre el editor.

- El envío de Form solo se ejecuta después de que los validadores de Field den su aprobación.

### Diseño adaptable y foco visible

La disposición original de escritorio en dos columnas se adapta a un flujo de entrega para móviles.

```
*{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}
```

Referencia de código

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

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

```
// 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
```

### Una instrucción para tu proyecto

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

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

- AddressList Estructura de los registros de dirección, selección y lista deshabilitada de API.

- Form Eventos de envío y error, y reglas de validación.

- Campo Composición nativa de campos de formulario.

- ConfigProvider Variables del tema y tema oscuro.

- Inicio rápido Configuración del componente de Vue y de la hoja de estilos.

- Locale Registro de la configuración regional en inglés.

- Fuente de los tokens base Colores base, espaciado, tipografía y radios oficiales.

## Recursos relacionados con el sistema de diseño Vant

### Vuestic UI

Una hoja de evaluación nativa de Vuestic, con preajustes de modo claro y oscuro verificados en el código fuente, etiquetas de valoración accesibles, validación de áreas de texto, un promedio calculado y un estado guardado que conserva la evaluación completada.

### Web Awesome

Examina los tokens semánticos reales de Web Awesome en elementos personalizados nativos, incluidos los cambios de radio y espaciado con alcance definido, el estilo de shadow-DOM, el comportamiento de selección y la validación de entradas.

### Ariakit

Ariakit ofrece componentes React sin estilos, con un estado compartido explícito y partes accesibles que se pueden combinar. Su combobox separa el texto introducido de la selección confirmada, por lo que resulta útil para selectores basados en búsquedas; el buscador de referencias de abajo muestra esa diferencia con resultados agrupados y no disponibles.


- [Referencia de implementación](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Fuente](https://github.com/youzan/vant/blob/main/packages/vant/src/style/var.less)
- [Fuente](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Consulta la especificación complementaria](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [Consulta la especificación complementaria](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Consulta la especificación complementaria](https://vant-ui.github.io/vant/#/en-US/form)
- [Consulta la especificación complementaria](https://vant-ui.github.io/vant/#/en-US/quickstart)
- [Referencia de código](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Referencia de código](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [AddressList Estructura de los registros de dirección, selección y lista deshabilitada de API.](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Form Eventos de envío y error, y reglas de validación.](https://vant-ui.github.io/vant/#/en-US/form)
- [Campo Composición nativa de campos de formulario.](https://vant-ui.github.io/vant/#/en-US/field)
- [ConfigProvider Variables del tema y tema oscuro.](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [Inicio rápido Configuración del componente de Vue y de la hoja de estilos.](https://vant-ui.github.io/vant/#/en-US/quickstart)
- [Locale Registro de la configuración regional en inglés.](https://vant-ui.github.io/vant/#/en-US/locale)
- [Fuente de los tokens base Colores base, espaciado, tipografía y radios oficiales.](https://github.com/youzan/vant/blob/main/packages/vant/src/style/var.less)