tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
358
1.5m

宫格子组件 xGridItem ​

预览

介绍 ​

不可单独使用，请把放它在x-grid标签内。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-grid-item/x-grid-item.uvue

使用 ​

ts

<x-grid-item></x-grid-item>

Props 属性 ​

名称说明类型默认值
bgColor背景，默认为空值，读取父xGrid组件统一设置的背景
如果这里提供了，以子组件为准。
string'transparent'
order项目在列表中的索引,从0开始
请务必在循环gridItem时提供order为循环的index
number-1
icon图标
string''
text文字
string''
iconColor图标颜色，空值取父xGrid的值
string''
textColor文字亮系，空值取父xGrid的值
string''
textDarkColor文字暗黑颜色，空值取父xGrid的值
string''
fontSize文字大小，空值取父xGrid的值
string''
iconSize图标大小，空值取父xGrid的值
string''
isLink是否开启链接hover效果
booleantrue
urlurl链接地址，如果填写，点击会跳转
string''

Events 事件 ​

名称参数说明
click-项目点击时触发

Slots 插槽 ​

名称说明数据
default默认插槽内容-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/grid

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class="text-weight-b mb-8">宫格 Grid</x-text>
		<x-text color="#999999">快速导航布局</x-text>
	</x-sheet>

	<!-- 测试边线逻辑：4列宫格 -->
	<x-sheet>
		<x-text font-size="16" class="text-weight-b mb-8">4列宫格</x-text>
		<x-text color="#999999" class="mb-8">注意观察边线显示：第一行无上边线，最左列无左边线，最右列无右边线，最后一行无底边线</x-text>
		<x-grid :col="4" item-height="88" :show-border="true" round="8" icon-color="primary" dark-icon-color="primary">
			<x-grid-item :order="0" icon="money-cny-circle-fill" text="项目0"></x-grid-item>
			<x-grid-item :order="1" icon="shopping-bag-fill" text="项目1"></x-grid-item>
			<x-grid-item :order="2" icon="price-tag-2-fill" text="项目2"></x-grid-item>
			<x-grid-item :order="3" icon="wallet-3-fill" text="项目3"></x-grid-item>
			<x-grid-item :order="4" icon="gift-fill" text="项目4"></x-grid-item>
			<x-grid-item :order="5" icon="coupon-5-fill" text="项目5"></x-grid-item>
			<x-grid-item :order="6" icon="shopping-bag-fill" text="项目6"></x-grid-item>
			<x-grid-item :order="7" icon="money-cny-circle-fill" text="项目7"></x-grid-item>
			<x-grid-item :order="8" icon="gift-fill" text="项目8"></x-grid-item>
			<x-grid-item :order="9" icon="coupon-5-fill" text="项目9"></x-grid-item>
			<x-grid-item :order="10" icon="shopping-bag-fill" text="项目10"></x-grid-item>
			<x-grid-item :order="11" icon="money-cny-circle-fill" text="项目11"></x-grid-item>
		</x-grid>
	</x-sheet>

	<!-- 简单测试：2x2宫格 -->
	<x-sheet>
		<x-text font-size="16" class="text-weight-b mb-8">2x2宫格</x-text>
		<x-text color="#999999" class="mb-8">2列2行，可以清楚看到边线</x-text>
		<x-grid :col="2" :show-border="true" icon-color="warning" dark-icon-color="warning">
			<x-grid-item :order="0" icon="home-fill" text="首页"></x-grid-item>
			<x-grid-item :order="1" icon="user-fill" text="用户"></x-grid-item>
			<x-grid-item :order="2" icon="settings-fill" text="设置"></x-grid-item>
			<x-grid-item :order="3" icon="ancient-gate-fill" text="信息"></x-grid-item>
		</x-grid>
	</x-sheet>

	<!-- 3列宫格测试 -->
	<x-sheet>
		<x-text font-size="16" class="text-weight-b mb-8">3列宫格</x-text>
		<x-text color="#999999" class="mb-8">3列布局的边线显示效果</x-text>
		<x-grid :col="3" :show-border="true" item-height="90" text-color="#333333">
			<x-grid-item :order="0" iconColor="danger" icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
			<x-grid-item :order="1" iconColor="error" icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
			<x-grid-item :order="2" iconColor="warn" icon="price-tag-2-fill" text="活动日历"></x-grid-item>
			<x-grid-item :order="3" iconColor="parisviolet" icon="wallet-3-fill" text="领淘金币"></x-grid-item>
			<x-grid-item :order="4" iconColor="success" icon="gift-fill" text="会员福利"></x-grid-item>
			<x-grid-item :order="5" iconColor="error" icon="inbox-archive-fill" text="省钱卡"></x-grid-item>
		</x-grid>
	</x-sheet>

	<!-- 无边线示例 -->
	<x-sheet>
		<x-text font-size="16" class="text-weight-b mb-8">无边线示例</x-text>
		<x-grid :col="4" :show-border="false" icon-color="primary" dark-icon-color="primary">
			<x-grid-item :order="0" icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
			<x-grid-item :order="1" icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
			<x-grid-item :order="2" icon="price-tag-2-fill" text="活动日历"></x-grid-item>
			<x-grid-item :order="3" icon="wallet-3-fill" text="领淘金币"></x-grid-item>
		</x-grid>
	</x-sheet>
	<view style="height:50px"></view>

</template>

<script lang="uts" setup>

</script>

<style>

</style>
最近更新