专业版

FaInteractiveButton 交互按钮

带有悬停动画效果的交互式按钮，鼠标悬停时显示箭头和文字位移。

基础用法

<template>
  <FaInteractiveButton text="了解更多" />
</template>

自定义样式

<template>
  <FaInteractiveButton
    text="立即体验"
    class="bg-primary text-primary-foreground"
  />
</template>

API

Props

参数	说明	类型	默认值
text	按钮文字	string	undefined
class	自定义类名	HTMLAttributes['class']	undefined

Slots

名称	说明
-	无插槽

示例

基础用法

<template>
  <div class="space-x-4">
    <FaInteractiveButton text="查看详情" />
    <FaInteractiveButton text="立即购买" />
    <FaInteractiveButton text="了解更多" />
  </div>
</template>

不同尺寸

<template>
  <div class="space-x-4">
    <FaInteractiveButton text="小按钮" class="px-4 py-1 text-sm" />
    <FaInteractiveButton text="标准按钮" />
    <FaInteractiveButton text="大按钮" class="px-8 py-3 text-lg" />
  </div>
</template>

不同颜色主题

<template>
  <div class="space-x-4">
    <FaInteractiveButton
      text="主要操作"
      class="bg-primary text-primary-foreground"
    />
    <FaInteractiveButton
      text="次要操作"
      class="bg-secondary text-secondary-foreground"
    />
    <FaInteractiveButton
      text="强调操作"
      class="bg-accent text-accent-foreground"
    />
  </div>
</template>

组合使用

<template>
  <div class="flex flex-col gap-4 items-center">
    <FaInteractiveButton text="下一步" />
    <FaInteractiveButton text="提交申请" class="bg-green-600 text-white" />
    <FaInteractiveButton text="取消" class="bg-gray-500 text-white" />
  </div>
</template>