# tui-grid-item 宫格Item

介绍

可设置2~5列,以及基本样式设置,可结合组件 tui-grid 使用。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiGridItem from "@/components/thorui/tui-grid-item/tui-grid-item"
export default {
	components:{
		tuiGridItem
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-grid-item": "/components/thorui/tui-grid-item/tui-grid-item"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

设置列数

通过 cell 属性设置宫格列数,cell 支持2~5列,默认为3。

<!--uni-app-->
<tui-grid>
	<block v-for="(item,index) in dataList" :key="index">
		<tui-grid-item :cell="4" @click="detail">
			<view class="tui-grid-icon">
				<tui-icon :name="item.name" :size="item.size"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

<!--微信小程序-->
<tui-grid>
	<block wx:for="{{dataList}}" wx:key="index">
		<tui-grid-item cell="{{4}}" bindclick="detail">
			<view class="tui-grid-icon">
				<tui-icon name="{{item.name}}" size="{{item.size}}"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>
// data 数据
dataList: [{
	name: "refresh",
	size: 30
}, {
	name: "search",
	size: 30
}, {
	name: "close-fill",
	size: 30
}, {
	name: "shut",
	size: 30
}, {
	name: "plus",
	size: 30
}, {
	name: "star-fill",
	size: 30
}, {
	name: "revoke",
	size: 30
}, {
	name: "shop",
	size: 30
}]

去掉所有边框

通过设置 tui-grid 组件的 unlined 属性,tui-grid-item 组件的 border 以及 bottom-line 属性去除边框。

<!--uni-app-->
<tui-grid unlined>
	<block v-for="(item,index) in dataList" :key="index">
		<tui-grid-item :border="false" :bottom-line="false" @click="detail">
			<view class="tui-grid-icon">
				<tui-icon :name="item.name" :size="item.size"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

<!--微信小程序-->
<tui-grid unlined>
	<block wx:for="{{dataList}}" wx:key="index">
		<tui-grid-item border="{{false}}" bottom-line="{{false}}"  bindclick="detail">
			<view class="tui-grid-icon">
				<tui-icon name="{{item.name}}" size="{{item.size}}"></tui-icon>
			</view>
			<text class="tui-grid-label">{{item.name}}</text>
		</tui-grid-item>
	</block>
</tui-grid>

# Slots

名称 说明
default 标签显示内容,tui-grid-item内显示内容可自定义

# Props

参数 类型 说明 默认值
cell [Number,String] 展示多少列,可设置2,3,4,5 3
backgroundColor String 背景颜色 #fff
hover Boolean 是否有点击效果 true
bottomLine Boolean 是否需要底部线条 true
border Boolean 是否需要纵向边框线条 true
index Boolean grid-item索引 0

# Events

事件名 说明 回调参数
click 点击事件,绑定事件后点击标签可触发 {index: Number}

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码