Vuetify v-flex宽度规格

用户名

我找不到任何的适当引用xssmmdlgxl的指令v-flex在Vuetify。如果我希望两列使用超小版式,三列在小版式中,四列在中等版式中,六列在大版式中,十二列在超大版式中,那么这是正确的HTML吗?

<v-flex xs2 sm3 md4 lg6 xl12>
    Mostly harmless.
</v-flex>
DigitalDrifter

该属性的数字部分是指v-flex12列布局中将跨越的列数。因此,xs1将是12列中的1列,而xs12将是12列中的12列。

这是一个视觉演示。

new Vue({
  data() {
    return {
      cols: 12
    }
  },
  el: '#app',
  methods: {
    color() {
      return this.hexToRgb(Math.random().toString(16).substr(2, 6))
    },
    hexToRgb(hex) {
      var bigint = parseInt(hex, 16);
      var r = (bigint >> 16) & 255;
      var g = (bigint >> 8) & 255;
      var b = bigint & 255;

      return r + "," + g + "," + b;
    }
  }
})
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-container fluid grid-list-md>
        <v-layout row wrap>
          <template v-for="c in cols">
            <v-flex v-for="i in Math.floor(cols/c)" :key="`${c}-${i}`" :class="`xs${c} text-xs-center`" :style="{ backgroundColor: `rgba(${color()},.4)` }">
              <b>xs{{ c }}</b>
            </v-flex>
          </template>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章