宫格 xGrid

---

在线预览

在线模拟尺寸:

介绍

内部只可放置x-grid-item。

平台兼容

H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑️	☑️	x	☑️	4.14+	1.0.0

文件路径

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

使用

<x-grid></x-grid>

Props 属性

名称	说明	类型	默认值
col	显示几列	number	3
itemHeight	项目高度	string	'70'
itemBgColor	统一设置子组件的背景	string	'white'
bgColor	整体宫格的背景	string	'transparent'
darkBgColor	整体宫格的背景暗黑，如果为空，读取全局sheetDark	string	'transparent'
width	整体宽度	string	'auto'
iconColor	图标颜色	string	'#333333'
darkIconColor	暗黑时图标颜色	string	'#FFFFFF'
textColor	文字颜色	string	'#888888'
textDarkColor	文字暗黑颜色	string	''
fontSize	文字大小	string	'13'
iconSize	图标大小	string	'25'
showBorder	是否显示边框。请务必为每个项目配置order	boolean	true
borderColor	``	string	'#f5f5f5'
borderDarkColor	``	string	'#333333'
round	圆角	string	'0'

Events 事件

名称	参数	说明

Slots 插槽

名称	说明	数据
default	插槽内只可放置x-grid-item	-

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/daohang/grid

示例源码

uvue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #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>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="uts" setup>

</script>

<style>

</style>