海拔

海拔辅助器允许您控制沿着 z-axis 的两个曲面之间的相对深度或距离。共有25个海拔层级，您可以使用类 elevation-{n} 去设置一个元素的海拔，其中的 n 是一个对应海拔层级所用到的介于 0-24 的整数。

用例

elevation 助手类允许你将一个自定义 z-depth 分配给任何元素。

template

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

实战场

template script

<template>
  <v-container fluid>
    <v-row>
      <v-col
        cols="12"
        md="4"
      >
        <v-slider
          v-model="selected"
          prepend-icon="mdi-pan-horizontal"
          min="0"
          max="24"
          thumb-label
        ></v-slider>
      </v-col>
      <v-col
        cols="12"
        md="4"
        offset-md="3"
      >
        <v-card :elevation="selected">
          <v-card-text>
            <p class="text-center ma-0">
              Elevation {{ selected }}
            </p>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        selected: 0,
      }
    },
  }
</script>

示例

下面是一些简单到复杂的例子。

动态高度

许多组件利用 elevatable 进行混合，并给予 elevation 属性。对于不支持的组件，你可以动态地更改类。

template

<template>
  <div class="text--primary">
    <!-- Using the elevation prop -->
    <v-hover>
      <template v-slot="{ hover }">
        <v-card
          :elevation="hover ? 24 : 6"
          class="mx-auto pa-6"
        >
          Prop based elevation
        </v-card>
      </template>
    </v-hover>
    <div class="my-6"></div>
    <!-- Using a dynamic class -->
    <v-hover>
      <template v-slot="{ hover }">
        <div
          :class="`elevation-${hover ? 24 : 6}`"
          class="mx-auto pa-6 transition-swing"
        >
          Class based elevation
        </div>
      </template>
    </v-hover>
  </div>
</template>