tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
613
2.5m

容器 xSheet ​

预览

介绍 ​

可方便快速的更改属性以塑造符合你的设计风格。背景，圆角，间隙等统一风格可全局配置。 主要是用来统一页面风格，间距等可统一设置，提高设计的一致性。

平台兼容 ​

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

文件路径 ​

ts

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

使用 ​

ts

<x-sheet></x-sheet>

Props 属性 ​

名称说明类型默认值
color主题背景
string'white'
darkColor暗黑时的主题背景，空值取全局
string''
followTheme是否让背景色跟随主题，默认是白色，不跟随。
booleanfalse
hoverColor按下时的焦点色
string''
url页面地址，提供时，点击可导航到该页面
string''
linearGradient渐变背景，提供时前面的color,dakColor将失效，格式为数组3长度[方向，颜色1，颜色2]
tuple[] as string[]
round圆角空值取全局[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组
union''
border边大小[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组
union''
shadow投影[x,y,大小,颜色(可选，不提供第4个使用背景色或者从渐变色中取值)]
Array():Array<string number> => ([] as string[])
borderColor边颜色[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string 自动转为 [string]
union():string[] => ([] as string[])
darkBorderColor暗黑时边颜色[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string 自动转为 [string]
union():string[] => ([] as string[])
borderStyle边类型[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string 自动转为 [string]
union'solid'
margin外边距[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组
union''
padding内边距[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组
union''
isLink是否为链接类型，是的话有点按效果
booleanfalse
loading是否让内容处于加载状态
booleanfalse
height高：rpx,px,%，数字等都行
union'auto'
width宽：rpx,px,%，数字等都行
union'auto'
hoverClass``
string''

Events 事件 ​

名称参数说明
click--

Slots 插槽 ​

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

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/chongyong/sheet

示例源码 ​

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">容器 Sheet</x-text>
		<x-text color="#999999"
			class="line-8">属性比较多，可快速的用来布局，减轻你的布局压力，让效率提升。实验证明：一个普通的小程序20个页面。使用容器+我的组件布局。2天内完成布局，2天对接完成后端。</x-text>
		<x-text color="error" class="line-8">并且背景，圆角，间隙允许全局动态/统一配置，布局后的页面可根据后期设计要求，一键修改所有设计风格。绝对布局利器。</x-text>
	</x-sheet>
	<x-sheet :round="['12','2']" color="primary">
		<x-text color="white">更改圆角</x-text>
	</x-sheet>
	<x-sheet :round="['12','2']" :border="['2','2']" :border-color="['red','primary']">
		<x-text font-size="18" class=" text-weight-b">边线</x-text>
	</x-sheet>

	<x-sheet :round="['12','2']" :linearGradient="['left','#ff667f','#fdb247']">
		<x-text color="white">渐变</x-text>
	</x-sheet>

	<x-sheet :loading="true">
		<x-text font-size="18" class=" text-weight-b mb-24">还允许让内容处于加载中</x-text>
		<x-sheet :margin="['0']" :linearGradient="['left','#ff667f','#fdb247']">
			<x-text color="white">渐变</x-text>
		</x-sheet>
		<x-sheet :margin="['0','12','0','0']" color="primary">
			<x-text color="white" class=" text-weight-b ">更改圆角</x-text>
		</x-sheet>
	</x-sheet>

	<view style="height: 50px;"></view>


</template>

<script setup lang="ts">

</script>

<style lang="scss">

</style>
最近更新