# Grid 宫格

# 介绍

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

# 引入

"usingComponents": {
	"m-grid": "mind-ui-weapp/grid/index",
	"m-grid-item": "mind-ui-weapp/grid-item/index",
}

# 示例

# 基础用法

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="/pages/home/index" link-type="redirectTo" />

	<!-- 自定义内容 -->
	<m-grid-item use-slot>slot</m-grid-item>
</m-grid>

# Api

# Grid Properties

参数 说明 类型 可选值 默认值
column-count 列数 Number — 4
border 是否显示边框 Boolean — true
use-slot 是否使用自定义内容插槽 Boolean — false

# Grid Item Properties

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

# Grid Item Events

事件名称 说明 返回值
bind:click Grid-item 点击事件回调，可自定义绑定 data- 属性 event

# Grid Item Slot

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

← Icon 图标 →