容器 xSheet

---

在线预览

在线模拟尺寸:

介绍

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

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径

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

使用

<x-sheet></x-sheet>

Props 属性

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

Events 事件

名称	参数	说明
click	-	-

Slots 插槽

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

Ref 方法

名称	参数	返回值	说明

示例文件路径

/pages/chongyong/sheet

示例源码

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">容器 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>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	
</script>

<style lang="scss">

</style>