Grid 宫格布局

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

代码演示

基础用法

通过 icon 属性设置格子内的图标，text 属性设置文字内容。

<hd-grid>
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
</hd-grid>

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

<hd-grid :column-num="3">
  <hd-grid-item icon="ic_shoppingcart_fill" :text="'文字' + i" v-for="i in 6" :key="i" />
</hd-grid>

自定义内容

通过插槽可以自定义格子展示的内容。

<hd-grid :column-num="3" :border="false">
  <hd-grid-item use-slot v-for="i in 3" :key="i">
    <image style="width: 100%; height: 90px" :src="`https://img01.yzcdn.cn/vant/apple-${i + 1}.jpg`" />
  </hd-grid-item>
</hd-grid>

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

<hd-grid square>
  <hd-grid-item icon="ic_shoppingcart_fill" text="文字" v-for="i in 8" :key="i" />
</hd-grid>

格子间距

通过gutter属性设置格子之间的距离。

<hd-grid :gutter="10">
  <hd-grid-item icon="ic_shoppingcart_fill" text="文字" v-for="i in 8" :key="i" />
</hd-grid>

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<hd-grid direction="horizontal" :column-num="3">
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
  <hd-grid-item icon="ic_voice_fill2" text="文字" />
</hd-grid>

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<hd-grid clickable :column-num="2">
  <hd-grid-item icon="ic_home_fill" link-type="reLaunch" url="/pages/home/Home" text="ReLaunch 跳转" />
  <hd-grid-item icon="ic_search_line" link-type="navigateTo" url="/pages/circle/Circle" text="Navigate 跳转" />
</hd-grid>

Name	Description	Type	Required	Default
square	是否将格子固定为正方形	Boolean	false	false
gutter	格子之间的间距，默认单位为px	Number / String	false	0
clickable	是否开启格子点击反馈	Boolean	false	-
columnNum	列数	Number	false	4
center	是否将格子内容居中显示	Boolean	false	true
border	是否显示边框	Boolean	false	true
direction	格子内容排列的方向，可选值为 horizontal	'horizontal' / 'vertical'	false	vertical
iconSize	图标大小，默认单位为px	String	false	56rpx
reverse	是否调换图标和文本的位置	Boolean	false	false

Slots

Name	Description	Default Slot Content
default	-	-