间距

更新你的布局而无需创建新的类，间距助手类对于修改元素的 padding 和 margin 都非常有用。

实战场

使用 playground 来了解不同的助手类能够做些什么。 关于他们是如何工作的，请参阅下面 How it works 部分。

template script style

<template>
  <v-container
    class="spacing-playground py-0 px-2"
    fluid
  >
    <v-row>
      <v-col
        cols="12"
        sm="6"
        class="d-flex align-center"
      >
        <v-select
          v-model="paddingDirection"
          :items="directions"
          label="Padding"
          class="pr-2"
        >
          <template v-slot:prepend>
            <strong class="primary--text">p</strong>
          </template>
          <template v-slot:append-outer>
            <div> - </div>
          </template>
        </v-select>
        <v-select
          v-model="paddingSize"
          :items="paddingSizes.slice(1)"
          label="Size"
        ></v-select>
      </v-col>
      <v-col
        cols="12"
        sm="6"
        class="d-flex"
      >
        <v-select
          v-model="marginDirection"
          :items="directions"
          label="Margin"
          class="pr-2"
        >
          <template v-slot:prepend>
            <strong class="primary--text">m</strong>
          </template>
          <template v-slot:append-outer>
            <div> - </div>
          </template>
        </v-select>
        <v-select
          v-model="marginSize"
          :items="marginSizes"
          label="Size"
        ></v-select>
      </v-col>
      <v-col
        cols="12"
        class="orange lighten-3 pa-0"
      >
        <v-card
          :class="[computedMargin]"
          class="elevation-4"
        >
          <div
            :class="[computedPadding]"
            class="light-green lighten-3"
          >
            <div
              class="white text-center"
              v-text="playgroundText"
            ></div>
          </div>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
      directions: ['t', 'b', 'l', 'r', 's', 'e', 'x', 'y', 'a'],
      paddingSizes: ['auto', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      marginSizes: [
        'auto',
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12',
        'n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7', 'n8', 'n9', 'n10', 'n11', 'n12',
      ],
      paddingDirection: 'a',
      paddingSize: '2',
      marginDirection: 'a',
      marginSize: '2',
      playgroundText: 'Use the controls above to try out the different spacing helpers',
    }),
    computed: {
      computedPadding () {
        return `p${this.paddingDirection}-${this.paddingSize}`
      },
      computedMargin () {
        return `m${this.marginDirection}-${this.marginSize}`
      },
    },
  }
</script>

<style>
  .spacing-playground .v-select .v-input__prepend-outer, .spacing-playground .v-select .v-input__append-outer{
    margin-top: 0.55rem;
    margin-right: 0.2rem;
  }
</style>

如何运行

将 margin 或者 padding 应用于一个元素，范围在 0 到 12 之间。每个尺寸增量都设计成与常用 Material Design 间距对齐。这些类可以使用 {property}{direction}-{size} 这个格式来应用。

占位符 property 用来设置间距的类型：

• m - 对应 margin
• p - 对应 padding

占位符 direction 指定属性所应用到的方向：

• t - 应用 margin-top 和 padding-top 的间距。
• b - 应用 margin-bottom 和 padding-bottom 的间距。
• l - 适用 margin-left 和 padding-left 的间距。
• r - 应用 margin-right 和 padding-right 的间距。
• s - 应用 margin-left/padding-left (LTR mode) 和 margin-right/padding-right (RTL mode)
• e - 应用 margin-right/padding-right (LTR model) 和 margin-left/padding-left (RTL model)
• x - 同时对应*-left和*-right属性
• y - 同时对应*-top和*-bottom属性
• a - 在所有方向应用该属性的间距。

size 控制在 4px 间隔中的属性增量：

• 0 - 消除所有 margin 或者 padding 并设置为 0
• 1 - 设置 margin 或者 padding 到 4px
• 2 - 设置 margin 或者 padding 到 8px
• 3 - 设置 margin 或者 padding 到 12px
• 4 - 设置 margin 或者 padding 到 16px
• 5 - 设置 margin 或者 padding 到 20px
• 6 - 设置 margin 或者 padding 到 24px
• 7 - 设置 margin 或者 padding 到 28px
• 8 - 设置 margin 或者 padding 到 32px
• 9 - 设置 margin 或者 padding 到 36px
• 10 - 设置 margin 或者 padding 到 40px
• 11 - 设置 margin 或者 padding 到 44px
• 12 - 设置 margin 或者 padding 到 48px
• n1 - 将负的 margin 设置到 4px
• n2 - 将负的 margin 设置到 8px
• n3 - 将负的 margin 设置到 12px
• n4 - 将负的 margin 设置到 16px
• n5 - 将负的 margin 设置到 20px
• n6 - 将负的 margin 设置到 24px
• n7 - 将负的 margin 设置到 28px
• n8 - 将负的 margin 设置到 32px
• n9 - 将负的 margin 设置到 36px
• n10 - 将负的 margin 设置到 40px
• n11 - 将负的 margin 设置到 44px
• n12 - 将负的 margin 设置到 48px
• auto - 设置边距为 auto

示例

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

水平布局

使用边距助手类，你可以轻松地水平居中内容。

template

<template>
  <v-card
    class="mx-auto"
    color="white"
    width="200px"
  >
    <v-card-text>
      Centered
    </v-card-text>
  </v-card>
</template>

负边距

也可以在相同的 1 到 12 间隔内应用负边距。

template script

<template>
  <div>
    <v-card
      class="mx-auto"
      height="100"
      max-width="200"
      outlined
    ></v-card>
    <v-card
      class="mt-n12 mx-auto"
      elevation="12"
      height="200"
      max-width="300"
    ></v-card>
  </div>
</template>

<script>
  export default {
    data: () => ({
      //
    }),
  }
</script>

和断点一起

Vuetify 有一个使用 Flexbox 构建的 12 格栅格系统。空格用于创建应用程序内容中的特定布局。 它由 5 个用于针对特定屏幕大小或方向的介质断点组成：xs, sm, md, lg 和 xl。 默认分辨率定义在 Viewport Breakpoints 表中，可以通过 breakpoint service config 进行修改。

如何运行

辅助类在给定的断点处应用 margin 或 padding。这些类可以使用以下格式应用。{property}{direction}-{breakpoint}-{size}。这并不适用于 xs，因为它是推断出来的；例如，ma-xs-2 等于 ma-2。

示例

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

和断点一起

使用 md 和 lg 断点间距

template

<template>
  <v-card
    class="pa-md-4 mx-lg-auto"
    color="white"
    width="250px"
  >
    <v-card-text>
      Adjust screen size to see spacing changes
    </v-card-text>
  </v-card>
</template>