低代码高性能原生UI框架Button 按钮
组件类型：UxButtonComponentPublicInstance
支持多种主题按钮、镂空按钮，可配置加载中状态，可开启节流等功能
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| theme | String | 'info' | 按钮类型 |
| text | String | - | 按钮文字 |
| color | String | - | 按钮文字颜色 |
| darkColor | String | - | 深色 |
| size | Number | $ux.Conf.fontSize | 按钮文字大小 |
| bold | Boolean | false | 按钮文字加粗 |
| background | String | - | 按钮背景颜色 |
| corner | Number | 5 | 圆角 |
| plain | Boolean | false | 是否镂空 |
| loading | Boolean | false | 显示加载中 |
| loadingType | String | 'spinner' | loading类型 |
| loadingText | String | '加载中...' | 加载中文字 |
| loadingSize | Number | $ux.Conf.fontSize | 加载中文字大小 |
| loadingColor | String | $ux.Conf.placeholderColor | 加载中颜色 |
| icon | String | - | 按钮图标 |
| iconSize | Number | $ux.Conf.fontSize | 图标大小 |
| iconColor | String | - | 图标文字颜色 |
| customFont | String | - | 自定义字体路径 |
| customFamily | String | - | 自定义字体family |
| direction | String | 'row' | 布局方向 |
| path | String | - | 点击跳转的页面路径 |
| throttleTime | Number | 0 | 节流，一定时间内只能触发一次，单位毫秒 |
| hoverStartTime | Number | - | 点击态出现时间，单位毫秒 |
| hoverStayTime | Number | 100 | 点击态保留时间，单位毫秒 |
| hover | Boolean | true | 是否显示点击态 |
| stopPropagation | Boolean | false | 阻止向上冒泡 |
| disabled | Boolean | false | 是否禁用 |
theme
| 值 | 说明 |
|---|---|
| text | 文字 |
| info | 默认 |
| primary | 主要 |
| success | 成功 |
| warning | 警告 |
| error | 错误 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
loadingType
| 值 | 说明 |
|---|---|
| circular | 圆环 |
| spinner | 菊花 |
direction
| 值 | 说明 |
|---|---|
| row | 水平布局 |
| column | 垂直布局 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| click | 点击事件 | event: MouseEvent |
| longpress | 长按事件 | event: TouchEvent |
| touchstart | 手指触摸动作开始事件 | event: TouchEvent |
| touchend | 手指触摸动作结束事件 | event: TouchEvent |
| touchmove | 手指触摸动作移动事件 | event: TouchEvent |
| touchcancel | 手指触摸动作被打断事件 | event: TouchEvent |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="按钮" :bold="true">
<ux-text text="支持多种主题按钮、镂空按钮，可配置加载中状态，可开启节流等功能"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="按钮" text="https://www.uxframe.cn/component/basic/button.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-button theme="info" text="默认" :mr="10"></ux-button>
<ux-button theme="primary" text="主要" :mr="10"></ux-button>
<ux-button theme="success" text="成功" :mr="10"></ux-button>
<ux-button theme="warning" text="警告" :mr="10"></ux-button>
<ux-button theme="error" text="错误" :mr="10"></ux-button>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="镂空按钮" :bold="true">
<ux-text text="支持镂空按钮，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-button :plain="true" theme="info" text="默认"></ux-button>
<ux-button :plain="true" theme="primary" text="主要" :mt="10"></ux-button>
<ux-button :plain="true" theme="success" text="成功" :mt="10"></ux-button>
<ux-button :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
<ux-button :plain="true" theme="error" text="错误" :mt="10"></ux-button>
<ux-button :plain="true" theme="text" text="文字"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义样式" :bold="true">
<ux-text text="支持配置图标、加载状态、圆角、背景色" :mb="15"></ux-text>
<ux-col>
<ux-button :corner="20" theme="error" text="圆角按钮"></ux-button>
<ux-button theme="primary" :loading="true" loadingText="请稍候..." loadingColor="white" :mt="10"></ux-button>
<ux-button theme="success" :useIcons="true" icon="click-outline" text="带图标" color="white" :mt="10"></ux-button>
<ux-button theme="warning" background="#a900a9" text="背景色" :mt="10"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="禁用按钮" :bold="true">
<ux-text text="支持禁用按钮，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-button :disabled="true" theme="info" text="默认"></ux-button>
<ux-button :disabled="true" theme="primary" text="主要" :mt="10"></ux-button>
<ux-button :disabled="true" theme="success" text="成功" :mt="10"></ux-button>
<ux-button :disabled="true" :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
<ux-button :disabled="true" :plain="true" theme="error" text="错误" :mt="10"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="功能" :bold="true">
<ux-text text="支持节流、跳转页面、阻止冒泡等功能" :mb="15"></ux-text>
<ux-row>
<ux-button theme="info" :throttleTime="200" text="开启节流" :mr="10"></ux-button>
<ux-button theme="info" :throttleTime="200" path="/pages/component/basic/text/text?title=From Button按钮" text="跳转页面" :mr="10"></ux-button>
<ux-button theme="info" :stopPropagation="true" text="阻止冒泡"></ux-button>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="按钮" :bold="true">
<ux-text text="支持多种主题按钮、镂空按钮，可配置加载中状态，可开启节流等功能"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="按钮" text="https://www.uxframe.cn/component/basic/button.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="主题" :bold="true">
<ux-text text="多种主题可配置，适配暗黑模式" :mb="15"></ux-text>
<ux-row>
<ux-button theme="info" text="默认" :mr="10"></ux-button>
<ux-button theme="primary" text="主要" :mr="10"></ux-button>
<ux-button theme="success" text="成功" :mr="10"></ux-button>
<ux-button theme="warning" text="警告" :mr="10"></ux-button>
<ux-button theme="error" text="错误" :mr="10"></ux-button>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="镂空按钮" :bold="true">
<ux-text text="支持镂空按钮，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-button :plain="true" theme="info" text="默认"></ux-button>
<ux-button :plain="true" theme="primary" text="主要" :mt="10"></ux-button>
<ux-button :plain="true" theme="success" text="成功" :mt="10"></ux-button>
<ux-button :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
<ux-button :plain="true" theme="error" text="错误" :mt="10"></ux-button>
<ux-button :plain="true" theme="text" text="文字"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义样式" :bold="true">
<ux-text text="支持配置图标、加载状态、圆角、背景色" :mb="15"></ux-text>
<ux-col>
<ux-button :corner="20" theme="error" text="圆角按钮"></ux-button>
<ux-button theme="primary" :loading="true" loadingText="请稍候..." loadingColor="white" :mt="10"></ux-button>
<ux-button theme="success" :useIcons="true" icon="click-outline" text="带图标" color="white" :mt="10"></ux-button>
<ux-button theme="warning" background="#a900a9" text="背景色" :mt="10"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="禁用按钮" :bold="true">
<ux-text text="支持禁用按钮，适配暗黑模式" :mb="15"></ux-text>
<ux-col>
<ux-button :disabled="true" theme="info" text="默认"></ux-button>
<ux-button :disabled="true" theme="primary" text="主要" :mt="10"></ux-button>
<ux-button :disabled="true" theme="success" text="成功" :mt="10"></ux-button>
<ux-button :disabled="true" :plain="true" theme="warning" text="警告" :mt="10"></ux-button>
<ux-button :disabled="true" :plain="true" theme="error" text="错误" :mt="10"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="功能" :bold="true">
<ux-text text="支持节流、跳转页面、阻止冒泡等功能" :mb="15"></ux-text>
<ux-row>
<ux-button theme="info" :throttleTime="200" text="开启节流" :mr="10"></ux-button>
<ux-button theme="info" :throttleTime="200" path="/pages/component/basic/text/text?title=From Button按钮" text="跳转页面" :mr="10"></ux-button>
<ux-button theme="info" :stopPropagation="true" text="阻止冒泡"></ux-button>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>