Display helpers

В Vuetify display helpers предоставляют удобные инструменты для управления видимостью и расположением элементов на странице в зависимости от размера экрана. Они основаны на системе breakpoints и позволяют создавать адаптивные интерфейсы без необходимости писать собственные медиазапросы CSS.

Основные принципы работы

Display helpers используют комбинацию breakpoint + условие отображения.

Синтаксис:

.d-{breakpoint}-{value}

Где:

  • d — сокращение от display
  • {breakpoint} — один из размеров экрана: xs, sm, md, lg, xl
  • {value} — тип отображения: none, inline, inline-block, block, flex, inline-flex, grid

Например:

<div class="d-none d-md-block">Этот блок виден только на экранах >= md</div>

Здесь:

  • d-none — скрыть блок на всех устройствах
  • d-md-block — показать блок на экранах среднего размера и больше

Типы значений display

Vuetify поддерживает следующие значения:

Значение Описание
none Элемент полностью скрыт
inline Элемент отображается как inline
inline-block Элемент как inline-block
block Элемент занимает всю ширину родителя
flex Элемент использует flex-контейнер
inline-flex Flex, но inline
grid Элемент как CSS grid-контейнер

Breakpoints и их диапазоны

Vuetify использует следующие стандартные точки останова:

Breakpoint Минимальная ширина
xs 0px
sm 600px
md 960px
lg 1264px
xl 1904px

Display helper применяет правила “от указанного брейкпоинта и выше”.

Пример:

<div class="d-none d-sm-flex">Гибкий блок на sm и выше</div>
  • На xs блок скрыт
  • На sm, md, lg, xl блок отображается как flex

Комбинирование display helpers

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

<div class="d-none d-sm-block d-md-flex">
  Контент
</div>

Интерпретация:

  • xs — скрыт
  • sm — блок
  • md и выше — flex

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

Условные классы: скрытие и показ

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

  • d-{breakpoint}-none — скрыть на указанном breakpoint и выше
  • d-{breakpoint}-block — показать как блок на указанном breakpoint и выше

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

<div class="d-none d-md-block">Скрыт на xs и sm, виден на md+ </div>

Если требуется скрыть элемент только на конкретном breakpoint:

<div class="d-sm-none">Скрыт только на sm</div>

Примеры использования

1. Мобильная адаптация навигации

<v-toolbar>
  <v-toolbar-title class="d-none d-md-flex">Название сайта</v-toolbar-title>
  <v-btn class="d-flex d-md-none">Меню</v-btn>
</v-toolbar>
  • На мобильных устройствах (xs, sm) отображается кнопка «Меню»
  • На планшетах и десктопах (md+) показывается заголовок

2. Скрытие изображений на маленьких экранах

<img src="image.jpg" class="d-none d-sm-block" />
  • Изображение не загружается визуально на xs, экономя место и ресурсы

3. Контент для десктопа и мобильного

<div class="d-none d-lg-flex">Контент для большого экрана</div>
<div class="d-flex d-lg-none">Контент для мобильного</div>
  • Позволяет создавать разные варианты интерфейса для разных размеров экрана

Flex и Grid через display helpers

Display helpers интегрируются с flexbox и grid, упрощая управление макетом:

<div class="d-flex d-md-grid">
  <div>Элемент 1</div>
  <div>Элемент 2</div>
</div>
  • На маленьких экранах — flex
  • На md+ — grid

Особенности и советы

  • Display helpers работают только с классами Vuetify и не заменяют полноценные медиазапросы CSS при сложной логике
  • Комбинация d-none и d-{breakpoint}-value — ключ к созданию адаптивного контента
  • Значения inline и inline-block полезны для текста и иконок, тогда как flex и grid подходят для макетов

Использование display helpers значительно ускоряет создание адаптивных интерфейсов в Vuetify, позволяя контролировать видимость элементов без написания кастомных медиазапросов.

Оглавление