TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
747
3.1m

按钮 xButton ​

在线预览
在线模拟尺寸:

介绍 ​

圆角，主题可通过配置统一设置或者动态全局设置，使设计风格统一并保持一致性。让你的风格独一无二。

平台兼容 ​

H5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑️☑️☑️☑️4.44+1.1.9

文件路径 ​

ts

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

使用 ​

ts

<x-button></x-button>

Props 属性 ​

名称说明类型默认值
color主题名，名称或者合法的颜色值<br>默认为空，读取全局的主题色，可动态切换主题。string''
darkColor暗黑时的自定义背景色string''
bgColor自定义背景色，优先级高于colorstring''
linearGradient渐变背景<br>数组格式如下<br> [方向:top,bottom,left,right,自定义值例:45deg,颜色1:,颜色2]<br>例:['left','black','white']string[]() : string[] => []
fontColor文字颜色string''
fontDarkColor文字颜色string''
fontSize文字大小string""
round圆角<br>空值时取全局的圆角值，大于-1时取本值。string""
border数字number0.5
shadow投影number[]() : number[] => {<br> return [] as number[]<br>}
borderColor自定义边框颜色 ，优先于color自动生成string""
skin主题样式<br>default 默认空值不作处理<br>secondary 次要按钮，<br>text 文本 按钮,<br>outline 线性，<br>dashed 虚线边框<br>thin 浅色浅色按钮（自动把color按理论值设置为浅色模式）string"default"
icon暂时只支持内置图标，名称不要带ri-string""
iconBtn是否为纯图标按钮booleanfalse
iconSize图标大小,空值取文字大小。string''
size按钮尺寸string"normal"
url提供url后，点击会导致该页面string""
navigateModeurl跳转模式,可以是官方指定的模式:navigateTo,redirectTo,switchTab,reLaunch,navigateBackstring"navigateTo"
disabled禁用后无法点击booleanfalse
loading是否加载中booleanfalse
height自定义高度，可以是数字，单位或者百分比string""
width宽，单位合法即可数字，字符串带单位，百分比。string""
block是否块状态按钮booleanfalse
formType表单属性，设置为form可以直接提交表单触发xform 的 submit<br>切记：如果你当作表单提交按钮时，一定是xform的直接子节点。<br>可填：form'form'""
lineHeight建议不要修改些值理论1时上下对齐<br>但由于uni sdk4.19-4.24之间会被裁剪，提供此属性<br>4.25之后建议改成1string"1.4"
fontWeight字号权限,normal,boldstring'normal'
openType``string""
lang``string"en"
sessionFrom``string""
sendMessageTitle``string""
sendMessagePath``string""
sendMessageImg``string""
appParameter``string""
showMessageCard``booleanfalse
phoneNumberNoQuotaToast``booleantrue

Events 事件 ​

名称参数说明
click-点击时触发
getuserinfo-点击
contact-点击
getphonenumber-点击
getrealtimephonenumber-点击
error-点击
opensetting-点击
launchapp-点击
chooseavatar-点击
chooseaddress-点击
chooseinvoicetitle-点击
addgroupapp-点击
subscribe-点击
login-点击
agreeprivacyauthorization-点击

Slots 插槽 ​

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

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/chongyong/button

示例源码 ​

uvue
vue
<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">按钮 Button</x-text>
			<x-text  class=" text-grey  line-8" >样式比原生丰富,主题颜色可以随意的为css合法值以及自己定义的品牌颜色名称，比较随意。</x-text>
		</x-sheet>
		
		<x-loading v-if="loading"></x-loading>
		
		<view v-if="!loading">
			<x-sheet>
				<x-button  :block="true" class="mb-12">主色</x-button>
				<x-button :block="true" class="mb-12" color="error">错误</x-button>
				<x-button :block="true" class="mb-12" color="warn">警告</x-button>
				<x-button :block="true" class="mb-12" color="danger">危险</x-button>
				<x-button :block="true" class="mb-12" color="success">成功</x-button>
				<x-button darkColor="#222222" :block="true" :shadow="[0,0]" class="mb-12" color="info">次要</x-button>
				
			</x-sheet>
			
			<x-sheet >
				<x-text  font-size="18"  class=" text-weight-b">尺寸</x-text>
			</x-sheet>
			<x-sheet class=" white round-10 pa-24 mx-24  mb-12 " >
				<x-button size="mini" class="mb-12" >超小</x-button>
				<x-button size="small" class="mb-12" color="warn" >小</x-button>
				<x-button size="normal" class="mb-12" color="success">正常</x-button>
				<x-button size="large" class="mb-12" color="danger">大</x-button>
			</x-sheet>
			
			
			<x-sheet >
				<x-text  font-size="18"  class=" text-weight-b">样式</x-text>
			</x-sheet>
			<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
				<x-button  :block="true" class="mb-12"  skin="primary">主色</x-button>
				<x-button :block="true" class="mb-12"  skin="thin">浅色按钮</x-button>
				<x-button :block="true" class="mb-12"  :skin="skin" @click="skin = 'primary'">镂空按钮</x-button>
				<x-button :block="true" class="mb-12"  skin="dashed">虚线按钮</x-button>
				<x-button :block="true" class="mb-12"  skin="text">文本按钮</x-button>
			</x-sheet>
			<x-sheet >
				<x-text  font-size="18"  class=" text-weight-b">其它样式,图标,尺寸等</x-text>
			</x-sheet>
			<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
				<x-button :block="true" icon="thumb-up-fill" class="mb-12" status="primary">图标按钮</x-button>
				<x-button :block="true" icon="verified-badge-line" :disabled="disable" class="mb-12" status="primary">禁用</x-button>
				<x-button :block="true" icon="customer-service-fill" :loading="disable" class="mb-12" status="primary">加载中</x-button>
				 
				<view class="flex flex-row flex-row-center-between">
					<x-button font-size="20" :iconBtn="true" icon="lock-unlock-fill" round="88" width="88" status="primary">
					</x-button>
					<x-button font-size="20" :iconBtn="true" icon="thumb-up-fill" round="88" width="88" color="naplesyellow">
					</x-button>
					<x-button font-size="20" :iconBtn="true" icon="headphone-fill" round="88" width="88" color="majorelleblue">
					</x-button>
					<x-button font-size="20" :iconBtn="true" icon="alarm-fill" round="88" width="88" color="venetianred">
					</x-button>
					
				</view>
			</x-sheet>
			<x-sheet >
				<x-text  font-size="18"  class=" text-weight-b">渐变</x-text>
				<x-text class=" text-grey ">渐变参考：https://www.designgradients.com/</x-text>
			</x-sheet>
			<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
				<x-button :block="true" :border="0" round="88" color="#ff667f" :linearGradient="['left','#ff667f','#fdb247']" class="mb-12" status="primary">渐变</x-button>
				<x-button :block="true" :border="0" round="88" color="#A531DC" :linearGradient="['left','#A531DC','#4300B1']" class="mb-12" status="primary">渐变</x-button>
				<x-button :block="true" :border="0" round="88" color="#D02020" :linearGradient="['left','#FF896D','#D02020']" class="mb-12" status="primary">渐变</x-button>
			</x-sheet>
			
		</view>
		<view class="py-32"></view>
		
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				disable:true,
				skin:"outline"
			};
		},
		onReady() {
			this.loading = false;
		}
	}
</script>

<style lang="scss">

</style>
最近更新