Grid 宫格

概述

基础宫格布局。每行 3 个宫格使用最佳。

宫格共包含 4 个组件：i-grid、i-grid-item、i-grid-icon、i-grid-label，其中，i-grid-icon 和 i-grid-label 默认定制好了样式，但在开发中也可不用这两个组件。

使用指南

在.vue中引入组件

<script>
    import iGrid from 'iview-mpvue/dist/components/grid/grid'
    import iGridItem from 'iview-mpvue/dist/components/grid-item/grid-item'
    import iGridIcon from 'iview-mpvue/dist/components/grid-icon/grid-icon'
    import iGridLabel from 'iview-mpvue/dist/components/grid-label/grid-label'
    export default {
        components: {
            'i-grid': iGrid,
            'i-grid-item': iGridItem,
            'i-grid-icon': iGridIcon,
            'i-grid-label': iGridLabel
        }
    }
</script>

在main.js中引入

import 'iview-mpvue/dist/components/grid/style/css'
import 'iview-mpvue/dist/components/grid-item/style/css'
import 'iview-mpvue/dist/components/grid-icon/style/css'
import 'iview-mpvue/dist/components/grid-label/style/css'

示例

<i-grid>
    <i-grid-item>
        <i-grid-icon>
            <image src="../images/icon-vip.png" />
        </i-grid-icon>
        <i-grid-label>Grid</i-grid-label>
    </i-grid-item>
    <i-grid-item>Grid</i-grid-item>
    <i-grid-item>Grid</i-grid-item>
</i-grid>

API

Grid properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-

GridItem properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-

GridIcon properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-

GridLabel properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-