延展纸

v-sheet 旨在为 Vuetify 中的其他 paper 组件提供支持。 它旨在用作低级组件。

用例

v-sheet 组件是一张可塑的纸，可以变形以方便其他组件。

template

<template>
  <div class="text-center">
    <v-sheet color="orange lighten-2">Hello, world! I'm a simple v-sheet</v-sheet>
  </div>
</template>

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

实战场

template script style

<template>
  <v-container>
    <v-row>
      <v-col>
        <v-slider v-model="width" min="0" max="500" label="Width"></v-slider>
        <v-slider v-model="height" min="0" max="500" label="Height"></v-slider>
        <v-slider v-model="elevation" min="0" max="24" label="Elevation"></v-slider>
        <v-select v-model="color" :items="colors" label="Color"></v-select>
        <v-switch v-model="tile" label="Tile"></v-switch>
      </v-col>
    </v-row>
    <v-row justify="space-around">
      <v-sheet
        :width="width"
        :height="height"
        :elevation="elevation"
        :color="color"
        :tile="tile"
      ></v-sheet>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      width: 100,
      height: 100,
      elevation: 4,
      colors: ['white', 'gray darken-2', 'warning', 'error', 'success', 'teal'],
      color: 'white',
      tile: false,
    }),
  }
</script>

<style scoped>
.v-input__slider, .v-select {
  width: 100%;
}
</style>

示例

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

使用海拔

延展纸可以接受 0 到 24 之间的自定义海拔（默认值为 0）。

template script

<template>
  <v-container>
    <v-row justify="space-around">
      <v-col
        v-for="elevation in elevations"
        :key="elevation"
        cols="12"
        md="4"
      >
        <v-sheet
          class="pa-12"
          color="grey lighten-3"
        >
          <v-sheet
            :elevation="elevation"
            class="mx-auto"
            height="100"
            width="100"
          ></v-sheet>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      elevations: [6, 12, 18],
    }),
  }
</script>

平铺

延展纸可以接受将其设为矩形的 tile 属性（不包含 border-radius）。

template

<template>
  <v-container>
    <v-row justify="space-around">
      <v-col
        v-for="tile in [false, true]"
        :key="tile"
        cols="12"
        md="4"
      >
        <v-sheet
          class="pa-12"
          color="grey lighten-3"
        >
          <div></div>
          <v-sheet
            :tile="tile"
            class="mx-auto"
            height="100"
            width="100"
          ></v-sheet>
          <div></div>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

颜色和大小

纸张和基于它们的部件可以有不同的尺寸和颜色。

template script

<template>
  <v-container>
    <v-row
      class="flex-child"
    >
      <v-col
        class="d-flex"
        cols="12"
        md="4"
      >
        <v-sheet
          class="d-flex"
          color="grey lighten-3"
          height="424"
        >
          <sheet-footer>
            #1: (3r x 2c)
          </sheet-footer>
        </v-sheet>
      </v-col>
      <v-col
        class="d-flex"
        cols="12"
        md="4"
      >
        <v-row>
          <v-col cols="6">
            <v-sheet
              class="d-flex"
              color="green lighten-3"
              height="150"
            >
              <sheet-footer>
                #2: (1r x 1c)
              </sheet-footer>
            </v-sheet>
          </v-col>
          <v-col cols="6">
            <v-sheet
              class="d-flex"
              color="yellow lighten-3"
              height="150"
            >
              <sheet-footer>
                #3: (1r x 1c)
              </sheet-footer>
            </v-sheet>
          </v-col>
          <v-col cols="12">
            <v-sheet
              class="d-flex"
              color="red lighten-3"
              height="250"
            >
              <sheet-footer>
                #5: (2r x 2c)
              </sheet-footer>
            </v-sheet>
          </v-col>
        </v-row>
      </v-col>
      <v-col
        cols="6"
        md="2"
      >
        <v-sheet
          class="d-flex"
          color="teal lighten-3"
          height="300"
        >
          <sheet-footer>
            #4: (2r x 1c)
          </sheet-footer>
        </v-sheet>
      </v-col>
      <v-col
        class="d-flex"
        cols="6"
        md="2"
      >
        <v-sheet
          class="d-flex mt-auto"
          color="purple lighten-3"
          height="300"
        >
          <sheet-footer>
            #6: (2r x 1c)
          </sheet-footer>
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    components: {
      SheetFooter: {
        functional: true,
        render (h, { children }) {
          return h('v-sheet', {
            staticClass: 'mt-auto align-center justify-center d-flex',
            props: {
              color: 'rgba(0, 0, 0, .36)',
              dark: true,
              height: 50,
            },
          }, children)
        },
      },
    },
  }
</script>