我找不到任何的适当引用xs
,sm
,md
,lg
和xl
的指令v-flex
在Vuetify。如果我希望两列使用超小版式,三列在小版式中,四列在中等版式中,六列在大版式中,十二列在超大版式中,那么这是正确的HTML吗?
<v-flex xs2 sm3 md4 lg6 xl12>
Mostly harmless.
</v-flex>
该属性的数字部分是指v-flex
12列布局中将跨越的列数。因此,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] 删除。
我来说两句