Tui-Plus3.0.0

Appearance

Grid (宫格) ​

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

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page title='宫格' main-class="p-30">
		<t-card main-class="mb-30" title="Grid 宫格组件"
			sub-title="宫格组件以灵活的栅格系统为核心，通过配置列数和可选边框，以及自定义子项样式，实现整齐划一的布局，为内容展示提供清晰有序的视觉体验。"></t-card>
		<t-section title="基础功能" main-class="mb-30"></t-section>
		<t-grid :column="5" main-class="tdb tdr mb-30">
			<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="主题+徽标+图标" main-class="mb-30"></t-section>
		<t-grid :column=" 5" main-class="tdb tdr mb-30 s-150" type="s" size="m" child-label-class="mt-0">
			<!-- 通过插槽方式显示徽标 -->
			<t-grid-item icon="red-packet" label="待付款">
				<template #badge>
					<t-badge type="error" main-class="da dr-10 dt-15" text="56556"></t-badge>
				</template>
			</t-grid-item>
			<!-- 通过属性配置显示徽标 -->
			<t-grid-item icon="car" label="待发货" :badge="true"
				:badge-attrs="{text:'99',mainClass:'da dr-10 dt-15', type:'e'}"></t-grid-item>
			<t-grid-item icon="bag" label="待收货" :badge="true"
				:badge-attrs="{text:'HOT',mainClass:'da dr-10 dt-15', type:'e'}"></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="列数设置+徽标" main-class="mb-30"></t-section>
		<t-grid :column="2" type='p' main-class="tdb tdr mb-30" 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="p" main-class="da dr-110 dt-30" text="15"></t-badge>
				</template>
			</t-grid-item>
		</t-grid>
		<t-section title="列数设置" main-class="mb-30"></t-section>
		<t-grid :column="4" main-class="tdb tdr mb-30">
			<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="可滚动" main-class="mb-30"></t-section>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 400rpx;">
			<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>
				<t-gap height="65rpx"></t-gap>
			</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>
				<t-gap height="65rpx"></t-gap>
			</swiper-item>
		</swiper>
	</t-page>
</template>
<script setup>
	const column = ref(5)
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
childClassString``统一设置子组件的样式，如果子组件也设置了样式，则合并。优先级低于子组件。
childLabelClassString``统一设置子组件标题文本样式，如果子组件也设置了样式，则合并。优先级低于子组件。
columnNumber4网格列数
childIconClassStrings-70统一设置子组件图标的样式，如果子组件也设置了样式，则合并。优先级低于子组件。

插槽 ​

名称返回值说明
default-