# t-grid

Grid 宫格

t-grid 组件介绍

t-grid 宫格组件以灵活的栅格系统为核心，通过配置列数和可选边框，以及自定义子项样式，实现整齐划一的布局，为内容展示提供清晰有序的视觉体验。

t-grid 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-grid 基础用法

基础用法参考 demo/grid/grid.uvue，通过 t-grid-item 子组件定义宫格项。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Grid 宫格组件"
				sub-title="宫格组件以灵活的栅格系统为核心，通过配置列数和可选边框，以及自定义子项样式，实现整齐划一的布局，为内容展示提供清晰有序的视觉体验。">
		</t-card>
		<t-section title="基础功能"
				   class="mb-15">
		</t-section>
		<t-grid :column="5"
				class="r-10 mb-15">
			<t-grid-item v-for="i in 5"
						 :key="i"
						 :icon="`/static/grid/grid (${i}).png`"
						 :label="`功能${i}`">
			</t-grid-item>
		</t-grid>
		<t-section title="主题+徽标+图标"
				   class="mb-15">
		</t-section>
		<t-grid :column="5"
				class="r-10 mb-15 s-75"
				type="success"
				size="medium"
				child-label-class="mt-0">
			<!-- 通过插槽方式显示徽标 -->
			<t-grid-item icon="red-packet"
						 label="待付款">
				<template #badge>
					<t-badge type="error"
							 class="da dr-5 dt-7"
							 text="56556">
					</t-badge>
				</template>
			</t-grid-item>
			<!-- 通过属性配置显示徽标 -->
			<t-grid-item icon="car"
						 label="待发货"
						 :badge="true"
						 :badge-attrs="{text:'99',class:'da dr-5 dt-7', type:'error'}">
			</t-grid-item>
			<t-grid-item icon="bag"
						 label="待收货"
						 :badge="true"
						 :badge-attrs="{text:'HOT',class:'da dr-5 dt-7', type:'error'}">
			</t-grid-item>
			<t-grid-item icon="chat"
						 label="待评价">
			</t-grid-item>
			<t-grid-item icon="integral"
						 label="退货">
			</t-grid-item>
		</t-grid>
		<t-section title="列数设置+徽标"
				   class="mb-15"></t-section>
		<t-grid :column="2"
				type='primary'
				class="r-10 mb-15"
				child-label-class="mt-0">
			<t-grid-item icon="calendar"
						 label="签到"></t-grid-item>
			<t-grid-item icon="gift"
						 label="积分">
				<template #badge>
					<t-badge type="primary"
							 class="da dr-55 dt-15"
							 text="15">
					</t-badge>
				</template>
			</t-grid-item>
		</t-grid>
		<t-section title="列数设置"
				   class="mb-15">
		</t-section>
		<t-grid :column="4"
				class="r-10 mb-15">
			<t-grid-item v-for="i in 5"
						 :key="i"
						 :icon="`/static/grid/grid (${i}).png`"
						 :label="`功能${i}`"
						 type="error">
			</t-grid-item>
		</t-grid>
		<t-section title="可滚动"
				   class="mb-15">
		</t-section>

		<swiper :indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				class="h-200">
			<swiper-item>
				<t-grid :column="4">
					<t-grid-item v-for="i in 8"
								 :key="i"
								 :icon="`/static/grid/grid (${i}).png`"
								 :label="`功能${i}`">
					</t-grid-item>
				</t-grid>
			</swiper-item>
			<swiper-item>
				<t-grid :column="4">
					<t-grid-item v-for="i in 8"
								 :key="i"
								 :icon="`/static/grid/grid (${i}).png`"
								 :label="`功能${i}`">
					</t-grid-item>
				</t-grid>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const column = ref(5)
</script>

t-grid Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
column	网格列数	number	4
childClass	统一设置子组件的样式，如果子组件也设置了样式，则合并。优先级低于子组件	string	''
childIconClass	统一设置子组件图标的样式，如果子组件也设置了样式，则合并。优先级低于子组件	string	's-70'
childLabelClass	统一设置子组件标题文本样式，如果子组件也设置了样式，则合并。优先级低于子组件	string	''

t-grid Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

t-grid Slots

插槽名	说明
default	默认插槽，放置 t-grid-item 子组件