Как использовать Vuetify Elevation Helpers

Высота дает важные визуальные подсказки об относительном расстоянии или глубине между двумя поверхностями по оси Z. Vuetify предоставляет служебные классы и реквизиты, которые позволяют нам легко устанавливать высоту элемента без создания пользовательских стилей CSS.

Помощник по высоте настраивает высоту тени элемента при применении. Всего существует 25 уровней высоты:

<template>
  <v-app>
    <v-container class="ma-4">
      <v-row justify="center">
        <v-col
          v-for="n in 25"
          :key="n"
          cols="auto"
        >
          <v-card
            :elevation="n - 1"
            height="100"
            width="100"
            color="grey lighten-3"
          >
            <v-row
              class="fill-height"
              align="center"
              justify="center"
              v-text="n - 1"
            ></v-row>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

Высота на основе реквизита в Vuetify

Многие компоненты Vuetify имеют свойство elevation для простой установки высоты.

В приведенном ниже примере кода мы используем компонент v-hover и свойство повышения v-card, чтобы изменить высоту тени, когда пользователь наводит курсор мыши на карточку:

<template>
  <v-app>
    <v-hover>
      <template v-slot:default="{ hover }">
        <v-card
          :elevation="hover ? 24 : 6"
          class="pa-6 ma-4"
        >
          Prop based elevation
        </v-card>
      </template>
    </v-hover>
  </v-app>
</template>

Повышение на основе класса в Vuetify

Для элемента без реквизита elevation мы можем применить к нему один из вспомогательных классов высот, чтобы настроить высоту. Классы имеют формат elevation-{value}, где value — уровень высоты.

<template>
  <v-app>
    <v-hover>
      <template v-slot:default="{ hover }">
        <div
          class="pa-6 ma-4"
          :class="`elevation-${hover ? 24 : 6}`"
        >
          Class based elevation
        </div>
      </template>
    </v-hover>
  </v-app>
</template>

Заключение

Vuetify предоставляет помощники по высоте, которые позволяют нам контролировать относительную глубину между двумя поверхностями по оси Z. Мы можем сделать это, установив свойство elevation для поддерживаемых компонентов или применив один из служебных классов возвышения.

Обновлено на: codingbeautydev.com.

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Получите бесплатную копию здесь.