Border

В библиотеке Element Plus управление границами компонентов осуществляется через комбинацию встроенных свойств, классов и CSS-переменных. Границы играют ключевую роль в визуальной иерархии интерфейса, помогая отделять элементы, создавать карточки и модальные окна с чёткой структурой.

Применение свойства border

Большинство компонентов Element Plus поддерживают прямое управление границами через пропсы:

  • border – логическое свойство, которое включается в компонентах вроде Card, Table и Form, добавляя рамку вокруг элемента. Пример для Card:
<el-card :border="true" class="custom-card">
  <p>Содержимое карточки с границей</p>
</el-card>

В данном случае свойство :border="true" добавляет стандартную рамку толщиной 1px и цветом по умолчанию из темы.

Управление цветом и толщиной границы

Для тонкой настройки визуала используется CSS:

.custom-card {
  border: 2px solid #409EFF; /* основной цвет темы Element Plus */
  border-radius: 8px;        /* скругление углов */
}
  • border-width – позволяет задать толщину границы.
  • border-style – тип линии: solid, dashed, dotted и другие.
  • border-color – цвет границы, может ссылаться на CSS-переменные темы:
border-color: var(--el-color-primary);

Скругление углов (border-radius)

Скругление углов создаёт мягкие визуальные переходы и улучшает восприятие компонентов. В Element Plus:

  • Мелкие скругления: 2–4px для кнопок и иконок.
  • Средние: 6–8px для карточек и полей форм.
  • Крупные: 12–16px для модальных окон или всплывающих панелей.

Пример:

.el-dialog {
  border-radius: 12px;
}

Встроенные классы для границ

Element Plus предоставляет готовые CSS-классы для быстрого добавления границ:

  • .is-bordered – активирует стандартную границу компонента.
  • .el-table__bordered – добавляет границы для таблиц.
  • .el-input__inner с модификатором .is-bordered – рамка для полей ввода.

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

Управление границами в таблицах

Для Table можно включать границы через проп border:

<el-table :data="tableData" border>
  <el-table-column prop="date" label="Дата"></el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
  <el-table-column prop="address" label="Адрес"></el-table-column>
</el-table>
  • Включение пропса border добавляет разделительные линии между строками и колонками.
  • Дополнительные стили через CSS позволяют управлять толщиной и цветом линий.

Кастомизация через CSS-переменные

Element Plus активно использует CSS-переменные для управления цветами границ:

.el-card {
  border-color: var(--el-border-color-base);
}

Доступные переменные:

  • --el-border-color-base – основной цвет границ.
  • --el-border-color-light – светлая граница для теней и фонов.
  • --el-border-radius-base – базовое скругление углов.

Использование переменных гарантирует, что кастомизация сохранит соответствие теме приложения.

Тонкая настройка отдельных сторон границы

Для специфичных случаев можно задавать границы только на определённых сторонах:

.custom-box {
  border-top: 2px solid #409EFF;
  border-left: 1px dashed #c0c4cc;
  border-right: none;
  border-bottom: 1px solid #e4e7ed;
}
  • border-top, border-right, border-bottom, border-left – позволяют контролировать каждую сторону отдельно.
  • Комбинации с border-radius создают нестандартные формы карточек и панелей.

Границы для кнопок и интерактивных элементов

Для кнопок рекомендуется использовать тонкую рамку с плавной анимацией при наведении:

.el-button {
  border: 1px solid var(--el-border-color-light);
  transition: border-color 0.3s ease;
}

.el-button:hover {
  border-color: var(--el-color-primary);
}

Это создаёт ощущение интерактивности и улучшает UX без изменения размеров кнопки.

Применение в модальных окнах и всплывающих панелях

  • Используется сочетание border и box-shadow для визуальной глубины.
  • Границы могут быть прозрачными или контрастными для выделения на фоне приложения.
.el-dialog__header {
  border-bottom: 1px solid var(--el-border-color-light);
}

Советы по оптимизации границ

  1. Соблюдать единство стиля: использовать переменные темы вместо прямых цветов.
  2. Минимизировать толщину: тонкие линии создают современный минималистичный интерфейс.
  3. Сочетать с тенями: мягкие тени усиливают эффект разделения элементов без громоздких рамок.
  4. Использовать классы Element Plus: сокращает дублирование CSS и облегчает поддержку кода.

Эти подходы позволяют максимально гибко управлять визуальными границами компонентов в Element Plus, сохраняя согласованность интерфейса и соответствие теме приложения.

Оглавление