Button

允许用户通过单次轻触执行操作和选择。

安装

npm

npm add @heroui-vue/button

pnpm

pnpm add @heroui-vue/button

yarn

yarn add @heroui-vue/button

bun

bun add @heroui-vue/button

NOTE

如果你使用全局安装的方式，可忽略此安装步骤

导入

按需导入

import { Button } from '@heroui-vue/button'

全局导入

import { Button } from 'heroui-vue'

使用

预览源代码

禁用

按钮将无法点击

预览源代码

大小

显示不同尺寸的按钮

预览源代码

半径

显示不同角度的按钮

预览源代码

颜色

显示不同颜色的按钮

预览源代码

变体

显示不同种类的按钮

预览源代码

加载

传递 isLoading 属性以在按钮内显示 Spinner 组件。

WARNING

正在开发中

你还可以通过将自定义组件传递给spinner插槽来自定义加载spinner。

预览源代码

spinner插槽默认显示在按钮的开始位置，你也可以在按钮的结束位置显示自定义组件，通过指定spinnerPlacement来实现。

预览源代码

带图标

你可以通过传递startContent或endContent插槽来添加图标。

预览源代码

仅图标

你还可以通过将isIconOnly属性和所需的图标作为默认子元素传递来显示不带文本的按钮。

预览源代码

自定义样式

你可以通过将自定义 Tailwind CSS 类传递给组件槽来自定义 Button 组件。

预览源代码

禁用Ripple

按钮按下时将不会出现涟漪效果

预览源代码

禁用动画

按钮按下时将不会出现动画效果

预览源代码

数据属性

Button 在 base 元素上具有以下属性：

• data-hover: 当按钮被悬停时。基于 useElementHover
• data-focus: 当按钮被聚焦时。基于 useFocus。
• data-focus-visible: 目前尚不支持，默认为 false。
• data-disabled: 当按钮被禁用时。基于 isDisabled 属性。
• data-pressed: 当按钮被按下时。基于 useMousePressed
• data-loading: 当按钮正在加载时。基于 isLoading 属性。

无障碍访问

INFO

某些功能可能不够完善，如果你发现任何问题，请提交 issue

• Button 具有 button 角色（目前尚不支持，计划支持）。
• 支持 和 键的键盘事件。
• 鼠标和触摸事件处理，以及按下状态管理。
• 键盘焦点管理和跨浏览器标准化。

❤️来自 HeroUI：我们推荐阅读这篇博客文章，了解构建在各种设备和交互方法下都能良好工作的按钮的复杂性。

API

Button 属性

名称	类型	默认值	描述
variant	"solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "ghost"	"solid"	按钮外观样式。
color	"default" | "primary" | "secondary" | "success" | "warning" | "danger"	"default"	按钮颜色主题。
size	"sm" | "md" | "lg"	"md"	按钮大小
radius	"none" | "sm" | "md" | "lg" | "full"	"md"	按钮边框圆角。
spinnerPlacement	"start" | "end"	"start"	加载器位置。
fullWidth	boolean	false	按钮是否应占据其父元素的全宽。
isIconOnly	boolean	false	按钮是否应具有相同的宽度和高度。
isDisabled	boolean	false	按钮是否被禁用。
isLoading	boolean	false	按钮是否正在加载。
disableRipple	boolean	false	按钮是否应在按下时显示涟漪效果。
disableAnimation	boolean	false	按钮是否应显示动画。

Button 插槽

名称	作用域	描述
default	-	默认插槽。
startContent	-	开始内容插槽。
endContent	-	结束内容插槽。
spinner	-	加载器插槽。

Button 事件 (开发中)

名称	类型	默认值
press	(e: PressEvent) => void	-
pressStart	(e: PressEvent) => void	-
pressEnd	(e: PressEvent) => void	-
pressChange	(isPressed: boolean) => void	-
pressUp	(e: PressEvent) => void	-
keyDown	(e: KeyboardEvent) => void	-
keyUp	(e: KeyboardEvent) => void	-