Border utilities

Border utilities в Vuetify — это набор классов для управления рамками элементов интерфейса. Они позволяют быстро добавлять, модифицировать или удалять границы, не прибегая к написанию кастомного CSS. Основное преимущество — единообразие и интеграция с системой дизайна Vuetify, где учитываются цвета темы, отступы и responsive-настройки.

Типы границ

Vuetify предоставляет несколько вариантов границ:

  1. Полные границы (border) Добавляют рамку вокруг всего элемента:

    <v-card class="border">
  Контент с рамкой
</v-card>

    По умолчанию рамка использует цвет темы divider и толщину 1px.

  2. Горизонтальные и вертикальные границы

    • border-top — верхняя граница
    • border-bottom — нижняя граница
    • border-left — левая граница
    • border-right — правая граница
    <v-card class="border-bottom">
  Только нижняя граница
</v-card>

  3. Скругленные углы и комбинирование с границами Vuetify поддерживает совместное использование классов border и rounded-*.

    <v-card class="border rounded-lg">
  Граница с большими скруглениями
</v-card>

Цвет и прозрачность границ

Цвет рамок легко меняется с помощью классов темы:

  • border-primary — рамка основного цвета
  • border-secondary — второстепенный цвет
  • border-success, border-warning, border-error, border-info — цветовые акценты
  • border-opacity-50 — прозрачность рамки 50%

Пример комбинирования:

<v-card class="border border-success border-opacity-25">
  Зеленая прозрачная рамка
</v-card>

Толщина границ

Толщину можно менять с помощью классов border-{size}:

  • border-0 — отсутствие границы
  • border-1 — 1px
  • border-2 — 2px
  • border-4 — 4px
  • border-8 — 8px

Пример:

<v-card class="border-4 border-warning">
  Толстая рамка
</v-card>

Управление сторонами и толщиной одновременно

Vuetify позволяет комбинировать стороны и толщину:

<v-card class="border-t-2 border-b-4 border-primary">
  Верхняя граница 2px, нижняя 4px
</v-card>

Ключевой момент — префиксы сторон:

  • t — top
  • b — bottom
  • l — left
  • r — right

Скрытие границ

Если необходимо убрать границу для конкретной стороны, используется класс border-{side}-0:

<v-card class="border border-t-0">
  Рамка со всеми сторонами, кроме верхней
</v-card>

Адаптивные границы

Vuetify поддерживает responsive-версии классов. Формат: {breakpoint}:border-{side}-{size}

Примеры:

<v-card class="sm:border-2 md:border-4">
  Рамка 2px на малых экранах, 4px на средних
</v-card>

<v-card class="lg:border-t-8">
  Верхняя граница 8px только на больших экранах
</v-card>

Доступные брейкпоинты: xs, sm, md, lg, xl.

Комбинирование с другими утилитами

Border utilities удобно использовать вместе с другими CSS-утилитами Vuetify:

  • Отступы и паддинги (pa-*, ma-*)
  • Фоны (bg-*)
  • Тени (elevation-*)

Пример комплексного применения:

<v-card class="border-2 border-info rounded-lg pa-4 elevation-4">
  Сложная карточка с рамкой, скруглением, паддингом и тенью
</v-card>

Итоговые рекомендации по использованию

  • Использовать системные классы Vuetify, чтобы обеспечить единообразие дизайна.
  • Комбинировать с responsive-утилитами для адаптивного интерфейса.
  • Для кастомных цветов или нестандартных толщин применять CSS-переменные темы Vuetify или style только при необходимости.
  • Скругления и границы лучше сочетать для визуальной гармонии, особенно в карточках и кнопках.

Border utilities в Vuetify обеспечивают мощный инструмент для быстрой стилизации элементов интерфейса, минимизируя необходимость писать собственный CSS и полностью интегрируясь с темой и адаптивностью.

Оглавление