Mind UI Vue

# Grid 宫格

# 介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

# 引入

import { Grid, GridItem } from 'mind-ui-vue';
Vue.use(Grid);
Vue.use(GridItem);

# 示例

# 基础用法

grid-item 需要与 grid 配合使用。

<m-grid column-count="4" border>
  <!-- 基础用法 -->
  <m-grid-item icon="boy" icon-color="#0181ff" text="文字" />

  <!-- 红点 -->
  <m-grid-item icon="love" icon-color="#EE5C42" text="文字" badge-dot />

  <!-- 数字 -->
  <m-grid-item icon="girl" icon-color="#e54d42" text="文字" badge-value="100" />

  <!-- 跳转链接 -->
  <m-grid-item icon="location" url="/" />
</m-grid>

# Api

# Grid Props

参数 说明 类型 可选值 默认值
column-count 列数 Number — 4
border 是否显示边框 Boolean — true

# GridItem Props

参数 说明 类型 可选值 默认值
icon 图标名称或图片地址 String — —
icon-color 图标颜色 String — —
icon-size 图标大小，单位 px Number — 48
text 文字 String — —
badge-dot 是否右上角显示状态点 Boolean — false
badge-value 右上角状态内容 Number/String — —

# GridItem Events

事件名称 说明 返回值
click Grid-item 点击事件回调 event

# GridItem Slots

名称 说明
— 自定义格子内容
icon 自定义图标
text 自定义文字

← Icon 图标 →