Листы v-sheet

Компонент v-sheet в библиотеке Vuetify служит базовым строительным блоком для создания контейнеров с фоновыми цветами, тенями и скруглениями. Он представляет собой обертку над стандартным <div>, но обеспечивает интеграцию с темингом Vuetify и системой стилей Material Design.

Ключевые свойства v-sheet:

  • elevation — задаёт глубину тени. Принимает числовые значения от 0 до 24.
  • rounded — управляет скруглением углов. Может быть булевым (true/false), числовым (4, 8, 16) или строковым ("lg", "xl").
  • color — задаёт фон. Может использоваться любой цвет из палитры Vuetify или кастомный CSS.
  • outlined — делает рамку вокруг компонента вместо фона.
  • tile — отключает скругление углов.
  • max-width и max-height — ограничения размеров.
  • height и width — явные размеры компонента.
<v-sheet color="primary" elevation="4" rounded="lg" width="300" height="200">
  Контент внутри v-sheet
</v-sheet>

Работа с фоном и цветами

v-sheet поддерживает как фиксированные цвета, так и динамические темы. Для интеграции с темой используется color="primary" или color="secondary". Для прозрачных листов можно использовать color="transparent" или elevation="0" для полностью плоского вида.

<v-sheet color="transparent" elevation="0">
  Прозрачный лист без тени
</v-sheet>

Для градиентов и нестандартных цветов можно использовать CSS-классы или атрибут style:

<v-sheet style="background: linear-gradient(to right, #ff8a65, #ff7043);">
  Градиентный фон
</v-sheet>

Тени и глубина

Свойство elevation управляет визуальной глубиной через тени Material Design.

  • elevation="0" — плоский лист без тени.
  • elevation="1-3" — лёгкая тень, подходит для карт и панелей.
  • elevation="4-8" — средняя тень, используется для выделения.
  • elevation="9-24" — глубокие тени для всплывающих элементов.
<v-sheet elevation="12" color="secondary" rounded>
  Лист с сильной тенью
</v-sheet>

Скругления и углы

Скругления управляются через свойство rounded.

  • Булевое значение true применяет стандартное скругление из темы.
  • false или tile отключают скругления.
  • Числовые значения задают радиус в пикселях.
  • Строковые значения ("sm", "md", "lg", "xl") соответствуют предустановкам Material Design.
<v-sheet rounded="xl" color="pink lighten-4">
  Лист с крупными скругленными углами
</v-sheet>

Outlined и текстуры

Использование outlined позволяет создавать листы с рамкой вместо сплошного фона. Это удобно для карточек с прозрачным контентом.

<v-sheet outlined rounded="md" width="250" height="150">
  Лист с обводкой вместо фона
</v-sheet>

Комбинация outlined и elevation создаёт интересные визуальные эффекты:

<v-sheet outlined elevation="2" color="white">
  Лист с лёгкой тенью и рамкой
</v-sheet>

Вложенные листы и композиция

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

<v-sheet color="grey lighten-3" rounded="lg" elevation="4" width="400" height="300">
  <v-sheet color="white" rounded="md" elevation="2" style="margin: 16px; padding: 16px;">
    Внутренний лист с контентом
  </v-sheet>
</v-sheet>

Использование с flex и grid

v-sheet идеально интегрируется с системами расположения Vuetify (v-row, v-col, v-container) благодаря своей блочной природе. Он может служить контейнером для flex или grid элементов, задавая визуальное выделение:

<v-row>
  <v-col cols="4">
    <v-sheet color="blue lighten-3" rounded elevation="6" height="150">
      Лист 1
    </v-sheet>
  </v-col>
  <v-col cols="4">
    <v-sheet color="green lighten-3" rounded elevation="6" height="150">
      Лист 2
    </v-sheet>
  </v-col>
</v-row>

Анимации и интерактивность

Для динамических интерфейсов можно комбинировать v-sheet с transition-компонентами Vuetify (v-fade-transition, v-scale-transition) или с v-hover для интерактивного изменения стиля.

<v-hover v-slot="{ hover }">
  <v-sheet :elevation="hover ? 12 : 4" color="deep-purple lighten-4" rounded>
    Наведи курсор, чтобы увеличить тень
  </v-sheet>
</v-hover>

Итоговое позиционирование

v-sheet является универсальным строительным блоком в Vuetify, объединяющим возможности цвета, тени, скругления и гибкого расположения. Он может использоваться для карточек, модальных окон, панелей, фонов и вложенных контейнеров. Гибкость настроек и полная интеграция с темингом Material Design делают его незаменимым компонентом при создании визуально богатых интерфейсов.

Ключевые практики работы с v-sheet:

  • Использовать elevation для визуального выделения.
  • Скругления подбирать под общий стиль интерфейса (rounded или tile).
  • Комбинировать с flex/grid для сложной компоновки.
  • Для интерактивных эффектов использовать hover и transition.
  • Для рамок вместо фона применять outlined.

Эта структура позволяет создавать как простые контейнеры, так и сложные визуальные элементы без дополнительных CSS-классов.

Оглавление