AnimateButton

带鼠标追踪径向光晕效果的按钮,支持 loading 状态和始终动画模式。

基本用法

默认

鼠标悬浮时沿指针位置生成径向光晕。

<script setup lang="ts">
import { AnimateButton } from '@tripo3d/design';
</script>

<template>
  <AnimateButton class="h-10 w-40 font-bold">生成模型</AnimateButton>
</template>

始终动画

alwaysAnimate

即使未悬停也持续展示光晕,常用于需要吸引注意力的主按钮。

<AnimateButton always-animate>立即体验</AnimateButton>

状态

禁用 / 加载

<AnimateButton disabled>禁用</AnimateButton>
<AnimateButton loading>加载中</AnimateButton>

自定义颜色

通过 UnoCSS class 覆写

<AnimateButton class="btn-bg-blue-1 btn-text-white btn-shadow-blue-1 btn-glow-blue-2">
  蓝色
</AnimateButton>
<AnimateButton class="btn-bg-purple-1 btn-text-white btn-shadow-purple-1 btn-glow-purple-2">
  紫色
</AnimateButton>

API

Props

名称	类型	默认值	说明
as	AsTag	'button'	渲染的 HTML 标签
alwaysAnimate	boolean	—	始终显示光晕,无需鼠标悬停
disabled	boolean	—	禁用状态
loading	boolean	—	加载中状态,显示 spinner 并禁用交互
class	string	—	按钮内容区 class
wrapperClass	string	—	外层包装容器 class
themeColor	string	—	预置主题色,影响光晕和文字颜色

Slots

插槽	作用域	说明
default	—	按钮内容

CSS 变量

CSS 变量	默认值	说明
--btn-bg-color	—	按钮背景色
--btn-text-color	—	文字色
--btn-hover-shadow-color	—	悬浮阴影颜色
--btn-glow-color	—	径向光晕颜色

可访问性

• 渲染为原生 <button>(默认 as='button'),支持键盘 Enter / Space 激活
• disabled / loading 状态下自动禁用交互,并阻止键盘与点击事件
• 如需渲染为链接,可使用 as="a" 并提供 href