Grid 宫格布局

网格布局组件，用于将子元素以网格形式排列，支持配置列数、边框显示和子元素类名等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='宫格'>
		<t-card class="mltr.30" title="Grid 宫格组件"
			sub-title="宫格组件以灵活的栅格系统为核心，通过配置列数和可选边框，以及自定义子项样式，实现整齐划一的布局，为内容展示提供清晰有序的视觉体验。"></t-card>
		<introduction title="基础功能">
			<t-grid :column="5">
				<t-grid-item v-for="i in 5" :key="i" :icon="`/static/grid/grid (${i}).png`"
					:label="`功能${i}`"></t-grid-item>
			</t-grid>
		</introduction>
		<introduction title="主题+徽标+图标">
			<t-grid :column=" 5" type="s">
				<t-grid-item icon="red-packet" label="待付款">
					<t-badge type="error" class="da-dr.10.1-dt.5.1">56556</t-badge>
				</t-grid-item>
				<t-grid-item icon="car" label="待发货"></t-grid-item>
				<t-grid-item icon="bag" label="待收货"></t-grid-item>
				<t-grid-item icon="chat" label="待评价"></t-grid-item>
				<t-grid-item icon="integral" label="退货"></t-grid-item>
			</t-grid>
		</introduction>
		<introduction title="列数设置+徽标">
			<t-grid :column="2" type='p'>
				<t-grid-item icon="calendar" label="签到"></t-grid-item>
				<t-grid-item icon="gift" label="积分">
					<t-badge type="p" class="da-dr.100-dt.5.1">15</t-badge>
				</t-grid-item>
			</t-grid>
		</introduction>
		<introduction title="列数设置">
			<t-grid :column="4">
				<t-grid-item v-for="i in 5" :key="i" :icon="`/static/grid/grid (${i}).png`"
					:label="`功能${i}`"></t-grid-item>
			</t-grid>
		</introduction>
		<introduction title="可滚动">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<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>
		</introduction>
	</t-page>
</template>

Props

名称	描述	类型	默认值	可选值
column	网格列数	Number	4	-
border	是否显示网格边框	Boolean	false	true, false
childClass	网格子元素的额外类名	String	''	-

Events

事件名	描述	回调参数	版本
-	Grid 组件暂无暴露的事件。	-	-

Methods

方法名	说明	参数
-	Grid 组件暂无暴露的方法。	-

Slots

名称	描述
default	Grid 组件提供了一个默认插槽，用于放置子元素。