# Element Plus — дизайн-система

## Предварительный просмотр интерфейса дизайн-системы Element Plus

Фильтруйте модули и перемещайте их между двумя нативными списками Transfer, проверяйте выбранные ключи и применяйте локальный выбор.

## Справочник по дизайн-системе Element Plus

Скомпилированный по умолчанию CSS из Element Plus 2.14.7. Значения переменных проверены по данным пакета, включая семантические псевдонимы. Компоновка списка переноса использует исходные адаптивные правила и не входит в основу системы.

### Основные цвета и цвета состояний

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --el-color-primary | #409eff | Основной акцент по умолчанию. |
| --el-color-primary-light-3 | #79bbff | Светлый оттенок основного цвета для более мягких взаимодействий. |
| --el-color-primary-light-5 | #a0cfff | Средний оттенок. |
| --el-color-primary-light-7 | #c6e2ff | Светлый оттенок. |
| --el-color-primary-light-9 | #ecf5ff | Ненавязчивая поверхность панели выбора и ключей. |
| --el-color-primary-dark-2 | #337ecc | Более тёмное состояние основного цвета. |
| --el-color-success | #67c23a | Роль успешного состояния. |
| --el-color-warning | #e6a23c | Роль предупреждения. |
| --el-color-danger | #f56c6c | Цветовая роль ошибки или опасного действия. |
| --el-color-info | #909399 | Нейтральная информационная роль. |
### Семантические цвета текста и поверхности

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --el-text-color-primary | #303133 | Основной текст для чтения. |
| --el-text-color-regular | #606266 | Обычный текст компонентов. |
| --el-text-color-secondary | #909399 | Подсказки и метаданные. |
| --el-text-color-placeholder | #a8abb2 | Роль текста-заполнителя. |
| --el-bg-color | #fff | Поверхность по умолчанию. |
| --el-bg-color-page | #f2f3f5 | Фон страницы. |
| --el-bg-color-overlay | #fff | Поверхность наложения. |
| --el-border-color | #dcdfe6 | Граница по умолчанию. |
| --el-border-color-light | #e4e7ed | Ненавязчивая граница карточки или сводки. |
### Типографика, элементы управления и форма

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | Предпочтительное семейство шрифтов по умолчанию. |
| --el-font-size-extra-large | 20px | Размер заголовка — 20 px. |
| --el-font-size-large | 18px | Размер — 18 px. |
| --el-font-size-medium | 16px | Размер — 16 px. |
| --el-font-size-base | 14px | Базовый размер — 14 px. |
| --el-font-size-small | 13px | Размер — 13 px. |
| --el-font-size-extra-small | 12px | Размер — 12 px. |
| --el-border-radius-base | 4px | Стандартное скругление углов компонента. |
| --el-border-radius-small | 2px | Небольшое скругление углов. |
| --el-component-size-large | 40px | Высота большого элемента управления. |
| --el-component-size | 32px | Высота элемента управления по умолчанию. |
| --el-component-size-small | 24px | Высота небольшого элемента управления. |
### Исходная компоновка рабочего пространства модулей

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Desktop panel arrangement | two panels with 180px reserved between | Исходная адаптация нативного Transfer. |
| Narrow layout | ≤700px: stacked panels | Исходная контрольная точка, а не токен Element Plus. |
| Page spacing | 32px desktop; 20px 16px mobile | Исходные внешние отступы. |
| Summary spacing | 24px padding / 24px gap | Исходная компоновка панели выбранных ключей и сводки модулей. |
## Полное руководство по дизайн-системе Element Plus

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

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

## Дизайн-система Element Plus: у списка переноса есть два типа выбора

### У списка переноса есть два типа выбора

> Компонент Transfer из Element Plus показывает списки доступных и выбранных элементов с кнопками для переноса отмеченных пунктов. В рабочей области модулей используется настоящий Vue-компонент версии 2.14.7. Его v-model содержит ключи целевого списка: изначально это catalog и tokens. Флажок внутри списка отмечает элемент для следующего действия переноса; сам по себе он не означает, что элемент уже находится в целевом списке.

Это различие наглядно показывает текущее значение модели. Если отметить элемент в исходном списке, он будет подготовлен к добавлению. Нажатие кнопки Add изменяет массив целевых ключей, обновляет сводку выбранных модулей и сбрасывает предыдущий результат применения. Так можно увидеть, как устроена модель библиотеки, а не догадываться об этом по двум статичным спискам.

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

## Дизайн-система Element Plus: роли по умолчанию и точные размеры компонентов

### Роли по умолчанию и точные размеры компонентов

Element Plus предоставляет --el-color-primary и его светлые и тёмные производные, цветовые роли для состояний, цвета текста и переменные поверхностей. В таблице приведены фактические скомпилированные значения из установленного пакета. В окружающей панели ключей используются primary-light-9 и обычный текст, а для кнопки действия — стандартное оформление основного цвета.

Типографика по умолчанию включает базовый размер 14 px и дополнительные размеры 12, 13, 16, 18 и 20 px. Переменные размеров компонентов задают габариты элементов управления малого, стандартного и большого размеров. Их не следует путать со шкалой отступов для компоновки страницы. Интервалы в рабочей области шириной 24 px и внешние отступы 32 px заданы явно как особенности исходной компоновки.

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

## Дизайн-система Element Plus: стабильные ключи, метки и недоступные параметры

### Стабильные ключи, метки и недоступные параметры

У каждого параметра есть ключ, метка и флаг недоступности. Массив выбранных элементов содержит эти ключи, поэтому метки можно менять, не меняя идентификаторы. В примере представлены модули Asset catalog, Token inspector, Review queue, Version history и Cross-project search. Audit export остаётся недоступным, чтобы показать видимый, но неактивный вариант.

Доступность в этом примере — статические демонстрационные данные. Это не проверка прав и не обещание, что эти модули существуют как устанавливаемые продукты. В реальном приложении источник параметров и правила доступа должны определяться моделью продукта. Не делайте вывод о наличии прав на основании того, что флажок Transfer можно нажать.

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

## Дизайн-система Element Plus: поиск меняет видимость, а не состав

### Поиск меняет видимость, а не состав

Параметр filterable добавляет к панелям независимые поля поиска. Подсказка в поле предлагает конкретное действие: «Найти модуль». По умолчанию поиск выполняется по метке параметра. При поиске выбранный элемент может исчезнуть из видимого целевого списка, но остаться в массиве выбранных ключей; сводка и поле с текущим значением по-прежнему показывают полный целевой набор.

Пользовательские слоты для пустого левого и правого списка позволяют отличить панель без подходящих результатов от ситуации, когда вообще ничего не выбрано. Кроме того, при пустом целевом массиве страница локально отключает кнопку Apply. Это разные состояния: отсутствие результатов поиска не означает, что модули не выбраны.

1. Найдите Review queue в списке доступных модулей.

2. Отметьте подходящий пункт и нажмите Add.

3. Очистите поле поиска и убедитесь, что review отображается в поле с текущим значением модели и в целевом списке.

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

## Дизайн-система Element Plus: сохраняйте связь между двумя списками на мобильных устройствах

### Сохраняйте связь между двумя списками на мобильных устройствах

В настольной версии панели нативного Transfer расположены рядом, а между ними находится отдельная область с кнопками Add и Remove. На экранах шириной не более 700 px панели располагаются друг под другом, а кнопки действий образуют горизонтальный ряд между ними. Заголовки Available modules и Workspace modules по-прежнему обозначают списки и помогают понять направление перемещения.

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

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

## Дизайн-система Element Plus: черновой состав и применённый снимок

### Черновой состав и применённый снимок

При нажатии «Применить локально» копируется массив выбранных ключей. При последующем изменении параметров передачи применённое состояние сбрасывается, поэтому уведомление об успехе не остаётся после изменения пользователем чернового набора. Команда «Восстановить исходный набор» присваивает новый массив catalog/tokens и также сбрасывает результат применения. Переходы состояния описаны несколькими явными строками в исходном коде Vue.

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

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

## Дизайн-система Element Plus: нативные элементы управления и понятные инструкции

### Нативные элементы управления и понятные инструкции

В примере используются нативные флажки и кнопки передачи Transfer. Текст кнопок — «Удалить» и «Добавить», а не одни лишь стрелки; это особенно удобно, когда списки расположены друг под другом. Заголовки панелей поясняют назначение исходного и целевого списков, а инструкция описывает последовательность действий: отметить и переместить.

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

- Заголовки панелей обозначают целевой список.

- Текстовые подписи помогают понять направление передачи в вертикальной компоновке.

- Текущее значение модели помогает обнаружить скрытые выбранные элементы.

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

## Дизайн-система Element Plus: сборка компонента Vue и загрузка CSS

### Соберите компонент Vue и загрузите CSS

В проекте Vue 3 на Vite установите element-plus@2.14.7 и импортируйте element-plus/dist/index.css перед исходной композицией CSS. Полный файл App.vue использует script setup и напрямую импортирует свои компоненты. В ElConfigProvider передаётся английская локаль, чтобы встроенные тексты панелей и пустых состояний соответствовали английской эталонной странице.

В предоставленной конфигурации для production-окружения App.vue импортируется через плагин Vue для Vite. Автономный пример собран локально: для этого тот же однофайловый компонент скомпилирован и упакован. Внешний CDN, сервис автоимпорта или компилятор шаблонов во время выполнения не требуются. Если в существующем проекте используется плагин автоимпорта, согласуйте генерируемые им стили с выбранной стратегией полного импорта или импорта отдельных компонентов.

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

## Дизайн-система Element Plus: переопределения темы должны сохранять взаимосвязи компонентов

### Переопределения темы должны сохранять связи между компонентами

CSS Пользовательские свойства позволяют менять общие роли, не переписывая селекторы каждого компонента. Рабочая среда использует фактические переменные --el для фона, текста, границ и скруглений. В ней изменены только селекторы компоновки, необходимые для размещения нативного Transfer в этой композиции.

Для более широкой брендовой темы используйте документированный подход на Sass или CSS-переменных и проверяйте состояния наведения, отключения и фокуса вместе. Если заменить только основное шестнадцатеричное значение на одном скриншоте, останутся без внимания более светлые поверхности и более тёмные состояния взаимодействия. Таблица на основе исходного кода содержит начальные значения, а полный нативный пример позволяет увидеть их влияние на работающий компонент.

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

## Дизайн-система Element Plus: примеры компонентов

### Полный компонент выбора модулей на Vue

Однофайловый компонент с нативными Transfer, Card, Alert, Button и Tag.

```
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
```

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

- v-model хранит выбранные ключи, а не целые объекты вариантов.

- Отключённый вариант остаётся видимым, но его нельзя переместить.

- При изменении выбора в Transfer устаревшее применённое состояние сбрасывается.

### Адаптивная компоновка Transfer

Стили сохраняют нативные панели и элементы управления, располагая их друг под другом на узких экранах.

```
body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}}
```

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

- Контрольная точка и окружающая компоновка выбраны независимо.

## Дизайн-система Element Plus: настройка агента

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

Проверено с Vue 3 и Element Plus 2.14.7. В App.vue настроен английский ConfigProvider и явно импортированы компоненты. Всё состояние хранится локально.

```
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install element-plus@2.14.7
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

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

```
Расширьте предоставленный модуль выбора в рабочей среде Element Plus 2.14.7 с помощью нативного ElTransfer. Сохраните шесть модулей с ключами, отключённый элемент Audit, фильтрацию и управляемый массив выбранных ключей. При применении должен сохраняться текущий выбор модулей; после дальнейшего редактирования этот снимок должен наглядно показываться как устаревший, а восстановление должно возвращать исходный выбор. Сохраните адаптивную компоновку с двумя панелями и семантику отключённых элементов, не заменяя Transfer несвязанными списками. Подключите нативную таблицу стилей перед исходной композицией CSS.
```

## Дизайн-система Element Plus: источники и область применения

Нативный компонент по справочнику Element Plus 2.14.7. Названия модулей и разрешения — исходные примеры; локальный выбор не приводит к установке и не меняет права доступа.

- Передача Ключи модели, фильтрация, отключённые данные и пустые слоты.

- Настройка темы Переменные CSS и настройка через Sass.

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

- Провайдер конфигурации Настройка локали.

- Цвет Роли цветов по умолчанию.

- Граница Основы границ и форм.

## Дизайн-система Element Plus: связанные ресурсы

### Flowbite

Композиция с нативными аккордеоном и боковой панелью Flowbite 4, проверенными семантическими псевдонимами темы, постоянным списком вещей для поездки и доступным локальным сценарием заметок о материалах.

### Fomantic UI

Нативная полка для чтения Fomantic UI с проверенными скомпилированными значениями темы, модулями выпадающего списка и рейтинга jQuery, явной поддержкой клавиатуры и постоянно сохраняемым локальным списком избранного.

### Foundation

Рабочий стол проверки доказательств Foundation с использованием XY Grid, пользовательских валидаторов Abide, подтверждения Reveal, реальных настроек Sass и полного кода локальной интеграции.


- [Справочник по реализации](https://element-plus.org/en-US/component/transfer.html)
- [Источник](https://element-plus.org/en-US/guide/theming.html)
- [Источник](https://element-plus.org/en-US/component/transfer.html)
- [Прочитать вспомогательную спецификацию](https://element-plus.org/en-US/component/transfer.html)
- [Прочитать вспомогательную спецификацию](https://element-plus.org/en-US/guide/theming.html)
- [Прочитать вспомогательную спецификацию](https://element-plus.org/en-US/guide/quickstart.html)
- [Справочник по коду](https://element-plus.org/en-US/component/transfer.html)
- [Справочник по коду](https://element-plus.org/en-US/guide/theming.html)
- [Передача Ключи модели, фильтрация, отключённые данные и пустые слоты.](https://element-plus.org/en-US/component/transfer.html)
- [Настройка темы Переменные CSS и настройка через Sass.](https://element-plus.org/en-US/guide/theming.html)
- [Быстрый старт Настройка компонента Vue и таблицы стилей.](https://element-plus.org/en-US/guide/quickstart.html)
- [Провайдер конфигурации Настройка локали.](https://element-plus.org/en-US/component/config-provider.html)
- [Цвет Роли цветов по умолчанию.](https://element-plus.org/en-US/component/color.html)
- [Граница Основы границ и форм.](https://element-plus.org/en-US/component/border.html)