概述
移动端常见等分网格。
按需引入
import Vue from 'vue';
import {Badge} from 'vue-ydui/dist/lib.rem/badge';
/* 使用px：import {Badge} from 'vue-ydui/dist/lib.px/badge'; */
Vue.component(Badge.name, Badge);代码示例
<template>
<yd-grids-group :rows="2">
<yd-grids-item>
<img slot="icon" src="http://static.ydcss.com/ydui/img/logo.png">
<span slot="text">image</span>
</yd-grids-item>
<yd-grids-item>
<yd-icon slot="icon" name="home" color="#FF685D"></yd-icon>
<span slot="text">iconfont</span>
</yd-grids-item>
</yd-grids-group>
</template>
<script type="text/babel">
export default {
}
</script>
image
在 yd-grids-group 组件上添加 rows="2"即为两列表格；
通过 slot="icon" 自定义图标，slot="text" 自定义显示文字。
<template>
<yd-grids-group :rows="3" title="等分3列">
<yd-grids-item v-for="n in 6">
<span slot="text">grids-3</span>
</yd-grids-item>
</yd-grids-group>
</template>
<script type="text/babel">
export default {
}
</script>在 yd-grids-group 组件上添加 title="标题标题"即可。