按钮

基础用法

theme控制主题色调，appear用来控制外观fill: 不带边框(默认)，outlined: 有边框, text: 文本按钮。

<template>
  <div class="flex flex-wrap gap-2">
    <u-btn>default</u-btn>
    <u-btn theme="primary">primary</u-btn>
    <u-btn theme="accent">accent</u-btn>
    <u-btn theme="success">success</u-btn>
    <u-btn theme="warn">warn</u-btn>
    <u-btn theme="error">error</u-btn>
  </div>
  <div class="flex flex-wrap gap-2 mt-2">
    <u-btn appear="outlined">default</u-btn>
    <u-btn theme="primary" appear="outlined">primary</u-btn>
    <u-btn theme="accent" appear="outlined">accent</u-btn>
    <u-btn theme="success" appear="outlined">success</u-btn>
    <u-btn theme="warn" appear="outlined">warn</u-btn>
    <u-btn theme="error" appear="outlined">error</u-btn>
  </div>
  <div class="flex flex-wrap gap-2 mt-2">
    <u-btn appear="text">default</u-btn>
    <u-btn theme="primary" appear="text">primary</u-btn>
    <u-btn theme="accent" appear="text">accent</u-btn>
    <u-btn theme="success" appear="text">success</u-btn>
    <u-btn theme="warn" appear="text">warn</u-btn>
    <u-btn theme="error" appear="text">error</u-btn>
  </div>
</template>

边框

可以直接使用unocss来覆盖默认边框的样式

<template>
  <div class="flex flex-wrap gap-2 items-start">
    <u-btn appear="outlined" class="b-dashed">dashed</u-btn>
    <u-btn theme="primary" appear="outlined" class="b-groove b-4px">groove</u-btn>
    <u-btn theme="accent" appear="outlined" class="b-double b-3px">double</u-btn>
    <u-btn theme="success" appear="outlined" class="b-ridge b-4px">ridge</u-btn>
    <u-btn theme="warn" appear="outlined" class="b-dotted">dotted</u-btn>
    <u-btn theme="error" appear="outlined" class="b-cyan">cyan</u-btn>
    <u-btn theme="primary" appear="outlined" class="rd-full">rounded full</u-btn>
  </div>
  <div class="flex flex-wrap items-start gap-2 mt-2">
    <u-btn appear="text" class="b-dashed b">dashed</u-btn>
    <u-btn theme="primary" appear="text" class="b-groove b-4px">groove</u-btn>
    <u-btn theme="accent" appear="text" class="b-double b-3px">double</u-btn>
    <u-btn theme="success" appear="text" class="b-ridge b-4px">ridge</u-btn>
    <u-btn theme="warn" appear="text" class="b-dotted b">dotted</u-btn>
    <u-btn theme="error" appear="text" class="b-cyan b b-solid">cyan</u-btn>
    <u-btn theme="primary" appear="text" class="rd-full">rounded full</u-btn>
  </div>
</template>

背景

使用unocss覆盖默认背景

<template>
  <div class="flex flex-wrap gap-2">
    <u-btn class="bg-cyan hover:bg-cyan-500">cyan</u-btn>
    <u-btn theme="primary" appear="outlined" class="bg-teal hover:bg-teal">teal</u-btn>
    <u-btn theme="accent" appear="text" class="bg-orange">orange</u-btn>
  </div>
</template>

文字颜色

使用unocss覆盖默认文字颜色

<template>
  <div class="flex flex-wrap gap-2">
    <u-btn class="text-cyan">cyan</u-btn>
    <u-btn theme="primary" appear="outlined" class="text-teal">teal</u-btn>
    <u-btn theme="accent" appear="text" class="text-orange">orange</u-btn>
  </div>
</template>

带图标

加载状态下只会显示加载图标

<template>
  <div class="flex flex-wrap gap-2 items-start">
    <u-btn icon="i-mdi:github"></u-btn>
    <u-btn theme="success" icon="i-ic:baseline-wechat" class="rd-full"></u-btn>
    <u-btn theme="primary" icon="i-mdi:github">primary</u-btn>
    <u-btn theme="accent" icon="i-carbon:music text-primary" appear="outlined">
      music
    </u-btn>
  </div>
</template>

大小

可以通过设置文字大小来设置按钮的大小, 比如class="text-2xl", 想要按钮占满整行添加类class="block"

<template>
  <div class="flex flex-wrap gap-2 items-start">
    <u-btn theme="primary">default</u-btn>
    <u-btn theme="primary" class="text-sm">sm</u-btn>
    <u-btn theme="primary" class="text-base">base</u-btn>
    <u-btn theme="primary" class="text-lg">lg</u-btn>
    <u-btn theme="primary" class="text-xl">xl</u-btn>
    <u-btn theme="primary" class="text-30px lh-none">30px</u-btn>
    <u-btn theme="primary" class="text-30px lh-normal">lh-normal</u-btn>
  </div>
</template>

Link按钮

使用to属性来指定跳转链接

Github Github

<template>
  <div class="flex flex-wrap gap-2 items-start">
    <u-btn appear="text" to="https://github.com/silentmx" target="_blank" icon="i-mdi:github"></u-btn>
    <u-btn appear="text" to="https://github.com/silentmx" target="_blank" theme="primary" icon="i-mdi:github">
      Github
    </u-btn>
    <u-btn appear="text" to="https://github.com/silentmx" target="_blank" theme="accent" class="b-solid"
      icon="i-mdi:github">
      Github
    </u-btn>
  </div>
</template>

加载状态

<script setup lang='ts'>
const loading = ref(false)
const startLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <u-btn theme="primary" :loading="loading" @click="startLoading">
      {{ loading ? 'Loading~~' : 'Click Me' }}
    </u-btn>
    <u-btn theme="accent" appear="outlined" :loading="loading" @click="startLoading">
      {{ loading ? 'Loading~~' : 'Click Me' }}
    </u-btn>
    <u-btn theme="accent" appear="text" class="b-dashed" :loading="loading" @click="startLoading">
      {{ loading ? 'Loading~~' : 'Click Me' }}
    </u-btn>
  </div>
</template>

组件`Props`

名称	类型	默认值	描述
theme	`'default' \| 'primary' \| 'accent' \| 'success' \| 'warn' \| 'error'`	`default`	主题颜色
appear	`'fill' \| 'outlined' \| 'text'`	`fill`	外观
icon	`string`	`undefined`	图标名称
loading	`boolean`	`false`	是否为加载状态
disabled	`boolean`	`false`	是否为禁用状态
to	`string`	`undefined`	跳转链接地址

组件`Slots`

名称	参数	描述
default	`()`	自定义默认内容

按钮 ​

基础用法 ​

边框 ​

背景 ​

文字颜色 ​

带图标 ​

大小 ​

Link按钮 ​

加载状态 ​

组件Props ​

组件Slots ​

按钮