Appearance

Button 按钮 ​

用于触发即时操作 ——该组件泛用性极强，对策性一般 (超大杯)

快速使用 ​

按钮有五种主题primary、success、info、error、text，默认为primary，可使用属性type更改；
传入plain属性可变更为镂空风格；

快速使用

默认风格：



镂空风格：

<!-- 按钮的基本使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton } from '@will1919/utopia-ui'
</script>

<template>
  <!-- 默认 -->
  <p>默认风格：</p>
  <utp-button>primary</utp-button>
  <!-- 传入不同的type -->
  <utp-button type="success">success</utp-button>
  <utp-button type="info">info</utp-button>
  <utp-button type="error">error</utp-button>
  <utp-button type="text">text</utp-button>
  <br>
  <br>
  <p>镂空风格：</p>
  <utp-button plain>primary</utp-button>
  <!-- 传入不同的type -->
  <utp-button type="success" plain>success</utp-button>
  <utp-button type="info" plain>info</utp-button>
  <utp-button type="error" plain>error</utp-button>
  <utp-button type="text" plain>text</utp-button>
</template>

不同形状 ​

除了默认的举行按钮之外，也支持椭圆形按钮和圆形按钮

不同形状


<!-- 按钮的不同形状 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton } from '@will1919/utopia-ui'
</script>

<template>
  <utp-button>默认矩形</utp-button>
  <utp-button round>椭圆</utp-button>
  <utp-button circle>圆</utp-button>
  <br>
  <br>
  <utp-button plain>默认矩形</utp-button>
  <utp-button plain round>椭圆</utp-button>
  <utp-button plain circle>圆</utp-button>
</template>

不同大小 ​

有三种大小，默认为中号

不同大小
<!-- 按钮的不同大小 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton } from '@will1919/utopia-ui'
</script>

<template>
  <utp-button size="small">小号</utp-button>
  <utp-button size="middle">默认</utp-button>
  <utp-button size="big">大号</utp-button>
</template>

是否禁用 ​

可以使用disabled来控制按钮是否禁用

禁用

默认风格：



镂空风格：

<!-- 按钮禁用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton } from '@will1919/utopia-ui'
</script>

<template>
  <p>默认风格：</p>
  <utp-button disabled>primary</utp-button>
  <!-- 传入不同的type -->
  <utp-button disabled type="success">success</utp-button>
  <utp-button disabled type="info">info</utp-button>
  <utp-button disabled type="error">error</utp-button>
  <utp-button disabled type="text">text</utp-button>
  <br>
  <br>
  <p>镂空风格：</p>
  <utp-button disabled plain>primary</utp-button>
  <!-- 传入不同的type -->
  <utp-button disabled type="success" plain>success</utp-button>
  <utp-button disabled type="info" plain>info</utp-button>
  <utp-button disabled type="error" plain>error</utp-button>
  <utp-button disabled type="text" plain>text</utp-button>
</template>

图标与加载 ​

按钮支持fontawesome风格图标，并且支持加载状态，加载状态按钮为disabled

图标与加载

支持图标：图标可以参考Icon组件文档或 https://fontawesome.com/search
ps：不支持pro角标的图标哦，露出贫穷的微笑 (￣ω￣)



加载状态：

<!-- 按钮图标与加载 -->
<script setup>
// 导入路径请参考安装部分
import { UtpButton } from '@will1919/utopia-ui'
</script>

<template>
  <p>
    支持图标：图标可以参考Icon组件文档或
    <a href="https://fontawesome.com/search" target="_blank"> https://fontawesome.com/search</a>
    <br>
    <small style="color: var(--utp-color-primary);">ps：不支持pro角标的图标哦，露出贫穷的微笑
      (￣ω￣)</small>
  </p>
  <utp-button icon="fa-solid fa-thumbs-up">a-solid fa-thumbs-up</utp-button>
  <utp-button icon="fa-solid fa-comment">a-solid fa-thumbs-up</utp-button>
  <utp-button icon="fa-solid fa-thumbs-up" circle></utp-button>
  <br>
  <br>
  <p>加载状态：</p>
  <utp-button loading>loading</utp-button>
</template>

Button API ​

属性 ​

属性说明类型默认值
type设置按钮主题primary | success | info| error| textprimary
plain镂空按钮状态booleanfalse
size设置按钮大小small | middle | bigmiddle
round椭圆形按钮状态booleanfalse
circle圆形按钮状态booleanfalse
loading载入中按钮状态booleanfalse
disabled禁用按钮状态booleanfalse
icon设置按钮图标string - https://fontawesome.com/search—
autofocus同原生button属性：autofocusbooleanfalse
native-type同原生button属性：typebutton| submit| resetbutton

事件 ​

事件名称说明事件类型
click点击按钮时的回调(e) => void

Exposes ​

名称说明类型
ref按钮 html 元素object：HTMLButtonElement