# Дизайн-система Vant

## Vant Предпросмотр интерфейса дизайн-системы

Выберите получателя, измените адрес, проверьте новые данные и переключите тему нативного компонента.

## Справочник по дизайну дизайн-системы Vant

Переменные Vant 4.10.2 CSS считываются из установленной базовой таблицы стилей. В предпросмотре через ConfigProvider применяется оригинальное переопределение основного цвета на бирюзовый; роли по умолчанию ниже помечены отдельно.

### Роли цветов по умолчанию

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --van-primary-color | var(--van-blue) | Псевдоним основного действия по умолчанию; синий цвет — #1989fa. |
| --van-success-color | var(--van-green) | Псевдоним успеха; зелёный цвет — #07c160. |
| --van-danger-color | var(--van-red) | Псевдоним опасности; красный цвет — #ee0a24. |
| --van-warning-color | var(--van-orange) | Псевдоним предупреждения; оранжевый цвет — #ff976a. |
| --van-text-color | var(--van-gray-8) | Псевдоним основного текста; gray-8 — #323233. |
| --van-text-color-2 | var(--van-gray-6) | Псевдоним вторичного текста; gray-6 — #969799. |
| --van-border-color | var(--van-gray-3) | Псевдоним разделителя; gray-3 — #ebedf0. |
| --van-background | var(--van-gray-1) | Поверхность страницы; gray-1 — #f7f8fa. |
| --van-background-2 | var(--van-white) | Поверхность компонента; белый цвет — #fff. |
### Шкала внутренних отступов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --van-padding-base | 4px | Небольшое внутреннее смещение. |
| --van-padding-xs | 8px | Небольшой внутренний промежуток. |
| --van-padding-sm | 12px | Внутренний отступ элемента адреса. |
| --van-padding-md | 16px | Стандартный отступ страницы. |
| --van-padding-lg | 24px | Отступ раздела. |
| --van-padding-xl | 32px | Большой отступ страницы. |
### Типографика и форма

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --van-font-size-xs | 10px | Размер текста интерфейса по умолчанию. |
| --van-font-size-sm | 12px | Размер текста интерфейса по умолчанию. |
| --van-font-size-md | 14px | Размер текста интерфейса по умолчанию. |
| --van-font-size-lg | 16px | Размер текста интерфейса по умолчанию. |
| --van-line-height-xs | 14px | Соответствующий токен высоты строки. |
| --van-line-height-sm | 18px | Соответствующий токен высоты строки. |
| --van-line-height-md | 20px | Соответствующий токен высоты строки. |
| --van-line-height-lg | 22px | Соответствующий токен высоты строки. |
| --van-radius-sm | 2px | Заданный радиус скругления углов. |
| --van-radius-md | 4px | Заданный радиус скругления углов. |
| --van-radius-lg | 8px | Заданный радиус скругления углов. |
| --van-radius-max | 999px | Заданный радиус скругления углов. |
| --van-disabled-opacity | .5 | Непрозрачность отключённого элемента по умолчанию. |
| --van-duration-base | .3s | Стандартная длительность перехода. |
### Настройки списка адресов и предпросмотра

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --van-address-list-padding | 12px 12px 80px | Официальное значение по умолчанию оставляет место для кнопки добавления внизу. |
| themeVars.addressListPadding | 12px | Оригинальная настройка: в этом предпросмотре закреплённая кнопка добавления скрыта. |
| themeVars.primaryColor | #176b77 | Оригинальное переопределение основного цвета сопоставлено с --van-primary-color. |
| --van-address-list-item-font-size | 13px | Официальный размер текста адреса. |
| --van-address-list-edit-icon-size | 20px | Официальный размер значка редактирования; это не размер всей сенсорной области. |
## Полное руководство по дизайн-системе Vant

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Мобильные компоненты дизайн-системы Vant с явно заданными ролями CSS

### Мобильные компоненты с явно заданными ролями CSS

> Vant предназначена для мобильных веб-интерфейсов на Vue. Компоненты AddressList, Field и CellGroup позволяют создавать компактные строки с адресами доставки и ячейки формы вместо настольной административной таблицы. В сценарии с набором для образцов используются эти нативные компоненты, а выбранный адрес назначения отображается в отдельной сводке.

Для основной роли по умолчанию используется синий цвет, заданный через --van-primary-color. Для успеха, опасности и предупреждения предусмотрены отдельные переменные цвета. В примере основной цвет намеренно изменён на #176b77 через ConfigProvider; этот бирюзовый цвет не обозначен как официальный цвет бренда Vant. Оригинальное оформление бумаги носит декоративный характер и не отражает состояние элементов управления.

Прочитать вспомогательную спецификацию

## Четырёхпиксельная шкала внутренних отступов и компактная типографика в дизайн-системе Vant

### Четырёхпиксельная шкала внутренних отступов и компактная типографика

Vant предоставляет значения внутренних отступов 4, 8, 12, 16, 24 и 32 пикселя. Это реальные базовые переменные, а не значения, выведенные по скриншоту. В элементах списка адресов используется токен небольшого отступа, а в окружающем макете предпросмотра предусмотрены более крупные промежутки между разделами, чтобы отделить форму от сводки заказа.

Указанные размеры текста — от 10 до 16 пикселей, соответствующая высота строки — от 14 до 22 пикселей. Для текста адреса предусмотрена отдельная переменная компонента размером 13px. В мобильном продукте для основного текста может потребоваться размер больше этих значений по умолчанию для элементов управления: заголовок примера — оригинальный размер 32px, уменьшенный до 27px на контрольной точке страницы.

Прочитать вспомогательную спецификацию

## Выбор переключателя определяется идентификатором адреса в дизайн-системе Vant

### Выбор переключателя определяется идентификатором адреса

AddressList получает записи с полями id, name, tel, address и необязательным isDefault. Значение v-model указывает на выбранную запись. Сводка формируется поиском этой записи по ID в текущем списке, поэтому после изменения получателя отображаемый адрес назначения обновляется сразу, без отдельного независимого состояния сводки.

Недоступный склад передаётся через disabled-list и снабжается понятным пояснением disabled-text. Он остаётся видимым для контекста, но выбрать его как адрес назначения нельзя. Метка Default указывает на то, что запись является адресом по умолчанию; она не зависит от текущего выбора и не меняется при выборе другого варианта переключателя.

Прочитать вспомогательную спецификацию

## Храните черновик отдельно от сохранённой записи в дизайн-системе Vant

### Храните черновик отдельно от сохранённой записи

Событие редактирования передаёт запись адреса. Редактор копирует в реактивный черновик только редактируемые поля, а стабильный идентификатор хранит отдельно. При отмене черновик скрывается, не изменяя сохранённый адрес. При сохранении заменяется соответствующая запись или добавляется новая локальная запись, после чего выбирается её идентификатор.

В этом примере редактор отображается под списком, а не во всплывающем окне внизу экрана. Так пример остаётся удобным для использования во встроенном документе. В Vant также есть компонент AddressEdit для стандартизированного ввода адреса; здесь используются Form и Field, поскольку для примеров адресов намеренно не предполагаются данные об административных единицах какой-либо конкретной страны.

1. Выберите студию и проверьте сводку, прежде чем открывать Edit.

2. Измените получателя, затем отмените изменения и убедитесь, что сохранённая строка осталась прежней.

3. Снова откройте редактор, сохраните корректные данные и проверьте выбранную сводку.

Прочитать вспомогательную спецификацию

## Правила Field управляют отправкой события submit в дизайн-системе Vant

### Правила Field управляют отправкой события submit

В Form задано validate-trigger="onSubmit". Валидатор получателя удаляет пробелы в начале и конце и требует не менее двух символов. Валидатор телефона допускает ограниченный набор цифр, пробелов, скобок и дефисов, а также необязательный знак плюса в начале. Валидатор адреса требует не менее десяти символов, не являющихся пробелами. Эти проверки демонстрируют работу механизма и не являются проверкой почтового адреса или универсальной валидацией телефонных номеров.

Основная кнопка Button с атрибутом native-type="submit" отправляет нативную форму. Vant вызывает событие submit только после успешного прохождения правил. Ошибки отображаются рядом с соответствующим Field, а scroll-to-error прокручивает страницу к полю с ошибкой. При начале редактирования предпросмотр также переводит фокус на первое поле получателя. При ошибках валидации черновик сохраняется.

Прочитать вспомогательную спецификацию

## ConfigProvider сопоставляет значения в CamelCase с переменными CSS в дизайн-системе Vant

### ConfigProvider сопоставляет значения в CamelCase с переменными CSS

Объект theme-vars включает значения primaryColor, buttonPrimaryBackground, buttonPrimaryBorderColor и addressListPadding. ConfigProvider сопоставляет эти имена с соответствующими переменными --van-*. В этом изолированном документе используется theme-vars-scope="global", чтобы псевдонимы, объявленные в корне, соответствовали изменённой основной роли. Переопределение роли и обоих значений основной кнопки позволяет согласованно настроить нативное действие и выбор переключателя.

При переключении свойства theme между light и dark обновляется тема компонентов Vant. Для страницы по-прежнему нужны собственные объявления фона и текста с использованием переменных темы: одна настройка провайдера не задаёт оформление для каждого элемента приложения. Декоративные образцы бумаги намеренно сохраняют свои цвета материала в обеих темах.

Прочитать вспомогательную спецификацию

## Vant — дизайн-система: для фиксированного мобильного действия нужно выбрать способ встраивания

### Для фиксированного мобильного действия нужно выбрать способ встраивания

AddressList обычно резервирует восемьдесят пикселей нижнего отступа для фиксированной кнопки добавления. В предварительном просмотре свойство show-add-button установлено в false, а вместо него используется обычная кнопка Button в потоке документа. Значение addressListPadding также изменено на двенадцать пикселей — так во встроенном примере не остаётся ни отдельно висящего фиксированного действия, ни необъяснимой пустой области внизу.

На широком экране список и сводка по материалам размещаются в двух колонках. При ширине менее исходной контрольной точки 680px они складываются в одну колонку. Встроенное значение AddressList height:100% явно сбрасывается до height:auto, чтобы панель занимала высоту по содержимому и не перекрывала следующую строку сетки. Минимальная высота области просмотра глобально не задаётся, поэтому родительская страница может подстроить размер встроенного документа по его содержимому. На узких экранах названия адресов переносятся, а не расширяют страницу.

Прочитать вспомогательную спецификацию

## Vant — дизайн-система: видимый фокус и явные результаты локальных действий

### Видимый фокус и явные результаты локальных действий

Базовый сброс стилей Vant удаляет стандартные контуры фокуса. Сопутствующая таблица стилей страницы восстанавливает кольцо фокуса толщиной три пикселя для кнопок, полей ввода, текстовых областей и элементов с tabindex. Это дополнительная настройка на уровне приложения, а не утверждение, что одного импорта библиотеки достаточно для обеспечения доступности. У переключателя темы есть доступное имя и видимая подпись.

Уведомление о статусе сообщает о локальном сохранении или выборе адреса. В нём прямо указано, что доставка не оформлена. В примере нет конечной точки оформления заказа, хранилища или внешних побочных эффектов. Для настоящего оформления заказа потребуются серверная проверка адреса, проверка возможности доставки и итоговое подтверждение перед покупкой.

- Поясняйте недоступность адресов явно, а не удаляйте их без предупреждения.

- Сохраняйте черновик после отправки с ошибкой, чтобы пользователь мог исправить отдельное поле.

- Уточните, меняет ли действие локальный выбор или действительно оформляет доставку.

Прочитать вспомогательную спецификацию

## Vant — дизайн-система: импорт локали и стилей компонентов

### Импортируйте локаль и стили компонентов

Полный SFC локально импортирует свои компоненты. Входной файл подключает английскую локаль через Locale.use и импортирует vant/lib/index.css перед исходной таблицей стилей макета. Проверенная версия пакета — Vant 4.10.2 для Vue 3; суффикс .mjs в импорте английской локали соответствует установленному ESM-файлу.

В автономном предварительном просмотре JavaScript, CSS и шрифт значков встроены в документ. Неиспользуемый удалённый резервный шрифт WOFF удалён после сохранения встроенного шрифта WOFF2, поэтому пример не зависит от запроса к стороннему шрифту. В рабочих приложениях используйте собственный сборщик и правила работы с ресурсами, а не копируйте URL размещённого демонстрационного файла.

Прочитать вспомогательную спецификацию

## Vant — дизайн-система: примеры компонентов

### Выбор адреса и редактирование с проверкой

Полный Vue SFC с AddressList, Form, Field, ConfigProvider и управляемым черновиком.

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

Справочник по коду

- В качестве выбранного значения используется ID адреса, а не его позиция в массиве.

- Фиксированная кнопка добавления AddressList скрыта; редактор открывается обычной кнопкой Button в потоке документа.

- Отправка Form выполняется только после успешной проверки Field.

### Адаптивная страница и видимый фокус

Исходный двухколоночный макет для компьютера перестраивается в мобильный процесс оформления доставки.

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

Справочник по коду

- Геометрия компонентов определяется Vant; контрольная точка страницы 680px выбрана для приложения.

- В предварительном просмотре восстанавливается видимое кольцо фокуса, поскольку базовый сброс стилей удаляет стандартные контуры.

## Vant — настройка дизайн-системы агента

### Отправная точка для реализации

Проверено на Vue 3 и Vant 4.10.2. Пример не сохраняет адреса вне состояния в оперативной памяти.

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

### Запрос для вашего проекта

```
Возьмите за основу адресный селектор sample-kit для Vant 4.10.2. Сохраните стандартный AddressList и сценарий редактирования через Form/Field для добавления или изменения локального адреса, включая проверку полей и состояние выбранного адреса. Оставьте настройку Locale, модуль en-US, область действия темы ConfigProvider и адаптацию AddressList по высоте содержимого. Отмена не должна заменять существующий адрес; успешная проверка должна обновлять только локальную коллекцию адресов. Не добавляйте к этому примеру, посвящённому только адресам, утверждения об успешной оплате или выборе интервала доставки.
```

## Vant — дизайн-система: источники и область применения

Vant 4.10.2. Токены по умолчанию и исходные решения для страницы обозначены отдельно. Примеры адресов вымышлены; выбор и редактирование выполняются локально.

- AddressList Структура записи адреса, выбор и API для отключённого списка.

- Form События отправки и ошибки, правила проверки.

- Field Стандартная композиция полей формы.

- ConfigProvider Переменные темы и тёмная тема.

- Быстрый старт Настройка компонента Vue и таблицы стилей.

- Locale Подключение английской локали.

- Источник базовых токенов Официальные базовые цвета, отступы, типографика и радиусы.

## Vant — дизайн-система: связанные ресурсы

### Vuestic UI

Нативный рабочий лист для критического обзора Vuestic с проверенными по исходному коду светлой и тёмной темами, доступными подписями рейтинга, валидацией текстовой области, рассчитанным средним баллом и сохранением завершённой оценки.

### Web Awesome

Изучите фактические семантические токены Web Awesome в нативных пользовательских элементах, включая локальные изменения радиуса и интервалов, стилизацию Shadow DOM, поведение списков выбора и валидацию полей ввода.

### Ariakit

Ariakit предоставляет неоформленные компоненты React с явно заданным общим состоянием и доступными составными элементами. Компонент combobox отделяет ввод текста от подтверждённого выбора, поэтому подходит для средств выбора с поиском; расположенный ниже справочник демонстрирует эту разницу на сгруппированных и недоступных результатах.


- [Справочник по реализации](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Источник](https://github.com/youzan/vant/blob/main/packages/vant/src/style/var.less)
- [Источник](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Прочитать вспомогательную спецификацию](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [Прочитать вспомогательную спецификацию](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Прочитать вспомогательную спецификацию](https://vant-ui.github.io/vant/#/en-US/form)
- [Прочитать вспомогательную спецификацию](https://vant-ui.github.io/vant/#/en-US/quickstart)
- [Справочник по коду](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Справочник по коду](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [AddressList Структура записи адреса, выбор и API для отключённого списка.](https://vant-ui.github.io/vant/#/en-US/address-list)
- [Form События отправки и ошибки, правила проверки.](https://vant-ui.github.io/vant/#/en-US/form)
- [Field Стандартная композиция полей формы.](https://vant-ui.github.io/vant/#/en-US/field)
- [ConfigProvider Переменные темы и тёмная тема.](https://vant-ui.github.io/vant/#/en-US/config-provider)
- [Быстрый старт Настройка компонента Vue и таблицы стилей.](https://vant-ui.github.io/vant/#/en-US/quickstart)
- [Locale Подключение английской локали.](https://vant-ui.github.io/vant/#/en-US/locale)
- [Источник базовых токенов Официальные базовые цвета, отступы, типографика и радиусы.](https://github.com/youzan/vant/blob/main/packages/vant/src/style/var.less)