hogwarts-ui 官方网站

Appearance

Button 按钮 ​

加载数据时显示动效

基础用法 ​

点击查看示例代码
vue
<template>
  <h-button-v1>基础按钮</h-button-v1>
</template>
<template>
  <h-button-v1>基础按钮</h-button-v1>
</template>

按钮颜色 ​

点击查看示例代码
vue
<template>
  <h-button-v1 class="bg-primary">主色</h-button-v1>
  <h-button-v1 class="bg-red-500">红色</h-button-v1>
  <h-button-v1 class="bg-orange-500">橘黄色</h-button-v1>
  <h-button-v1 class="bg-yellow-500">黄色</h-button-v1>
  <h-button-v1 class="bg-green-500">绿色</h-button-v1>
  <h-button-v1 class="bg-teal-500">茶色</h-button-v1>
  <h-button-v1 class="bg-blue-500">蓝色</h-button-v1>
  <h-button-v1 class="bg-violet-500">紫罗兰色</h-button-v1>
  <h-button-v1 class="bg-purple-500">紫色</h-button-v1>
  <h-button-v1 class="bg-pink-500">粉色</h-button-v1>
</template>
<template>
  <h-button-v1 class="bg-primary">主色</h-button-v1>
  <h-button-v1 class="bg-red-500">红色</h-button-v1>
  <h-button-v1 class="bg-orange-500">橘黄色</h-button-v1>
  <h-button-v1 class="bg-yellow-500">黄色</h-button-v1>
  <h-button-v1 class="bg-green-500">绿色</h-button-v1>
  <h-button-v1 class="bg-teal-500">茶色</h-button-v1>
  <h-button-v1 class="bg-blue-500">蓝色</h-button-v1>
  <h-button-v1 class="bg-violet-500">紫罗兰色</h-button-v1>
  <h-button-v1 class="bg-purple-500">紫色</h-button-v1>
  <h-button-v1 class="bg-pink-500">粉色</h-button-v1>
</template>

带图标 ​

点击查看示例代码
vue
<template>
  <h-button-v1 class="bg-green-500" icon="fa fa-user">添加好友</h-button-v1>
  <h-button-v1 class="bg-green-500" icon="fa fa-info">添加好友</h-button-v1>
  <h-button-v1 class="bg-green-500" icon="fa fa-close">添加好友</h-button-v1>
</template>
<template>
  <h-button-v1 class="bg-green-500" icon="fa fa-user">添加好友</h-button-v1>
  <h-button-v1 class="bg-green-500" icon="fa fa-info">添加好友</h-button-v1>
  <h-button-v1 class="bg-green-500" icon="fa fa-close">添加好友</h-button-v1>
</template>

简约模式 ​

点击查看示例代码
vue
<template>
  <h-button-v1 class="!text-blue-500 bg-white" icon="fa fa-user">添加好友</h-button-v1>
  <h-button-v1 class="!text-blue-500 bg-white" icon="fa fa-info">添加好友</h-button-v1>
  <h-button-v1 class="!text-blue-500 bg-white" icon="fa fa-close">添加好友</h-button-v1>
</template>
<template>
  <h-button-v1 class="!text-blue-500 bg-white" icon="fa fa-user">添加好友</h-button-v1>
  <h-button-v1 class="!text-blue-500 bg-white" icon="fa fa-info">添加好友</h-button-v1>
  <h-button-v1 class="!text-blue-500 bg-white" icon="fa fa-close">添加好友</h-button-v1>
</template>