Weirdo-UI

Appearance

Button 按钮 ​

按钮（Button）是用户界面中常见的交互元素，通常用于触发某种操作或提交表单。

基础用法 ​

基础按钮，使用 type属性来定义不同类型的按钮。

基础用法
Button 组件的基础用法
<script setup>
import Button from '@/components/Button/Button.vue'
import Icon from '@/components/Icon/Icon.vue'
</script>
<template>
<div class="basic block">
  <Button type="primary"> Primary </Button>
  <Button type="success"> Success </Button>
  <Button type="warning"> Warning </Button>
  <Button type="danger"> Danger </Button>
  <Button type="info"> Info </Button>
</div>

<div class="plain block">
  <Button type="primary" plain> Primary </Button>
  <Button type="success" plain> Success </Button>
  <Button type="warning" plain> Warning </Button>
  <Button type="danger" plain> Danger </Button>
  <Button type="info" plain> Info </Button>
</div>

<div class="round block">
  <Button type="primary" round> Primary </Button>
  <Button type="success" round> Success </Button>
  <Button type="warning" round> Warning </Button>
  <Button type="danger" round> Danger </Button>
  <Button type="info" round> Info </Button>
</div>

<div class="circle block">
  <Button type="primary" circle>   <Icon icon="star" /> </Button>
  <Button type="success" circle> <Icon icon="star" /> </Button>
  <Button type="warning" circle> <Icon icon="star" /> </Button>
  <Button type="danger" circle> <Icon icon="star" /> </Button>
  <Button type="info" circle> <Icon icon="star" /> </Button>
</div>
</template>
<style>
.block {
  margin-bottom: 10px;
}
</style>

禁用状态 ​

基础用法
Button 组件的基础用法
<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
<div class="disabled block">
  <Button type="primary" disabled> Primary </Button>
  <Button type="success" disabled> Success </Button>
  <Button type="warning" disabled> Warning </Button>
  <Button type="danger" disabled> Danger </Button>
  <Button type="info" disabled> Info </Button>
</div>
</template>

Icon ​

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
<div class="icon block">
  <Button icon="star"> Star Button </Button>
</div>
</template>

加载状态按钮 ​

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
<div class="loading block">
  <Button loading> Loading... </Button>
</div>
</template>

大小不同的按钮 ​

<script setup>
import Button from '@/components/Button/Button.vue'
</script>
<template>
<div class="size block">
  <Button size="large"> Large </Button>
  <Button type="primary"> 普通 </Button>
  <Button type="success" size="small"> Small </Button>
</div>
</template>

ButtonGroup ​