按钮样式

按钮样式

1. 为了保证多平台按钮样式一致性，请使用 default 类型的按钮，然后使用背景色、文本色、边框色等样式对其进行样式修饰；
2. 按钮样式封装主题样式文件内，您可以根据项目需要进行修改；

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt">button</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row ux-space-between" 
		style="padding:20rpx">
			<button 
			type="default" 
			class="ux-button ux-noborder">
				<text class="ux-button-text ux-color-black2">button</text>
			</button>
			<button
			type="primary" 
			class="ux-button ux-noborder">
				<text class="ux-button-text ux-color-white">primary</text>
			</button>
			<button 
			type="warn" 
			class="ux-button ux-noborder" 
			hover-class="ux-bg-red3">
				<text class="ux-button-text ux-color-white">button</text>
			</button>
			<button 
			type="default" 
			class="ux-button ux-noborder" 
			style="background-color:#9C27B0;">
				<text class="ux-button-text ux-color-white">自定义</text>
			</button>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt">mini button</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row" 
		style="padding:20rpx">
			<button 
			size="mini" 
			type="default" 
			class="ux-button-mini ux-noborder" 
			style="padding:0 28rpx;">1</button>
			<button 
			size="mini" 
			type="warn" 
			class="ux-button-mini ux-noborder ux-ml" 
			style="padding:0 28rpx;">2</button>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			
		}
	},
	methods: {
		
	}
}
</script>
<style>

</style>