TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
496
2.3m

按钮 xButton ​

在线预览
在线模拟尺寸:

介绍 ​

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

平台兼容 ​

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

文件路径 ​

ts

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

使用 ​

ts

<x-button></x-button>

Props 属性 ​

名称说明类型默认值
color主题颜色，空取全局
string''
darkColor暗黑主题颜色，空取全局
string''
bgColor自定背景色
string''
linearGradient渐变[方向，颜色1，颜色2]
Array():string[] => [] as string[]
fontColor字号颜色
string''
fontDarkColor暗黑字号颜色
string''
fontSize字号大小
string''
round圆角，空取全局
string''
border边线大小
number0.5
shadow投影[x,y,大小]
Array():number[] => [] as number[]
borderColor边线颜色
string''
skin样式主题"default" \
"secondary" \
"text" \
"outline" \
"dashed" \
"thin"
SkinType'default' as SkinType
icon按钮图标
string''
iconBtn是否是纯按钮图标
booleanfalse
iconSize图标大小
string''
size按钮大小"mini" \
"large" \
"normal" \
"small"
SizeType'normal' as SizeType
url跳转链接
string''
navigateMode跳转方式，同官方
string'navigateTo'
disabled是否禁用
booleanfalse
loading加载状态
booleanfalse
height高
string''
width宽
string''
block是否占据整行
booleanfalse
formType是否作为x-form提交表单用于触发提交表单
union'' as 'form' ''
lineHeight行高
string'1.4'
fontWeight加粗
string'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 setup lang="ts">
	import { ref } from 'vue'
	const loading = ref(true)
	const disable = ref(true)
	const skin = ref("outline")
	onReady(() => {
		loading.value = false
	})
</script>

<style lang="scss">

</style>
最近更新