Grid 宫格

手机扫码预览

01:50



---

组件名：rice-grid、rice-grid-item

用于展示一组数据

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

可以通过 icon 设置图标,text 设置文本内容

<rice-grid>
  <rice-grid-item icon="photo" text="内容" />
  <rice-grid-item icon="photo" text="内容" />
  <rice-grid-item icon="photo" text="内容" />
  <rice-grid-item icon="photo" text="内容" />
</rice-grid>

自定义列数

column-num 可以自定义列数

<rice-grid :column-num="3">
  <rice-grid-item v-for="item in 6" :key="item" icon="photo" text="内容" />
</rice-grid>

内容横排

vertical 为 false 即可实现内容横排

<rice-grid :column-num="3" :vertical="false">
    <rice-grid-item v-for="item in 3" :key="item" icon="photo" text="内容" />
  </rice-grid>

不显示边框

border 为 false 即可不显示边框

<rice-grid :column-num="4" :border="false">
  <rice-grid-item v-for="item in 8" :key="item" icon="photo" text="内容" />
</rice-grid>

自定义插槽

<rice-grid :column-num="4">
  <rice-grid-item v-for="item in 4" :key="item">
    <template #default>
      <text class="slot-text">插槽{{item}}</text>
    </template>
  </rice-grid-item>
</rice-grid>

API

Grid Props

属性名	类型	说明	默认值
column-num	String|Number	列数	4
border	Boolean	是否显示边框	-
clickable	Boolean	是否开启格子的点击反馈	-
vertical	Boolean	格子内容是否垂直排列	-
text-color	String	文字颜色	-
text-size	String|Number	文字大小	-
icon-color	String	图标颜色	-
icon-size	String|Number	图标大小	-
custom-style	Object	自定义样式	-

GridItem Props

属性名	类型	说明	默认值
text	String|Number	文字	-
text-color	String	文字颜色	-
text-size	String|Number	文字大小	-
icon	String	图标或者图片链接	-
icon-color	String	图标颜色	-
icon-size	String|Number	图标大小	-
to	String	页面跳转地址	-
bg-color	String	背景颜色	-
custom-style	Object	自定义样式	-

GridItem Events

事件名	说明	回调参数
click	宫格点击	-

GridItem Slots

名称	说明
default	自定义内容

类型定义

组件导出如下类型

// 组件类型
const gridRef = ref<RiceGridComponentPublicInstance | null>(null)
const gridItemRef = ref<RiceGridItemComponentPublicInstance | null>(null)