按钮

v-btn组件用一个material design主题和多个选项来替换标准的html按钮。任何色彩辅助类都可以用来改变背景或文字的颜色。

API

v-btn
名称
absolute
默认值
false
类型
boolean

给元素设置绝对定位

名称
active-class
默认值
'v-btn--active'
类型
string

当组件处于激活状态时被绑定的类,警告(warning)取决于组件,这可能会导致副作用。如果您需要在默认情况下添加自定义类,只需设置active-class="default-class your-class"

名称
append
默认值
false
类型
boolean

Vue Router的router-link属性

名称
block
默认值
false
类型
boolean

将按钮的扩展到可用空间的100%

名称
bottom
默认值
false
类型
boolean

将组件向底部对齐

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
depressed
默认值
false
类型
boolean

移除按钮的框阴影

名称
disabled
默认值
false
类型
boolean

Route列表项是被禁用的

名称
exact
默认值
false
类型
boolean

完全匹配链接,没有这个的话,“/”将匹配每一个路由

名称
exact-active-class
默认值
undefined
类型
string

Vue Router的 router-link属性

名称
fab
默认值
false
类型
boolean

使按钮变圆

名称
fixed
默认值
false
类型
boolean

给元素设置固定定位

名称
flat
默认值
false
类型
boolean

移除按钮的背景色

名称
href
默认值
undefined
类型
string | object

将组件标签指定为<a>

名称
icon
默认值
false
类型
boolean

将按钮指定为图标——原型和平面

名称
input-value
默认值
undefined
类型
any

控制按钮的激活状态

名称
large
默认值
false
类型
boolean

大型按钮

名称
left
默认值
false
类型
boolean

将组件向左边对齐

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
loading
默认值
false
类型
boolean

添加一个加载中的图标动画

名称
nuxt
默认值
false
类型
boolean

指定一个链接是nuxt链接(nuxt-link)

名称
outline
默认值
false
类型
boolean

按钮将拥有一个轮廓

名称
replace
默认值
false
类型
boolean

Vue Router router-link 属性

名称
right
默认值
false
类型
boolean

将组件向右边对齐

名称
ripple
默认值
undefined
类型
boolean | object

使用v-ripple指令

名称
round
默认值
false
类型
boolean

按钮两边会边圆

名称
small
默认值
false
类型
boolean

小型按钮

名称
tag
默认值
'button'
类型
string

指定要在组件上使用的自定义标签

名称
target
默认值
undefined
类型
string

指定目标属性,仅适用于猫标签。

名称
to
默认值
undefined
类型
string | object

将组件标签指定为<router-link>

名称
top
默认值
false
类型
boolean

将组件向顶部对齐

名称
type
默认值
'button'
类型
string

设置按钮的类型标签

名称
value
默认值
undefined
类型
any

控制可见性

示例

扁平

扁平按钮没有巷子箱子阴影,也没有背景。只有鼠标悬浮时才显示按钮的容器。

凸起

凸起的按钮有一个会在在点击时加重的框阴影,这是默认的样式。

凹陷

凹陷的按钮依然保持其背景色,但没有框阴影。

按钮下拉菜单

按钮下拉菜单是带有额外的样式的常规选择框。

图标

图标可作为按钮的主要内容。

浮动

浮动按钮是圆形的,通常包含一个图标。

加载器

使用加载(loading)属性,你可以通知用户有正在进行的处理。默认行为是使用一个v-progress-circular组件,但可以对齐进行自定义。

大小

按钮可以被设置不同的尺寸选项以适应多种方案。

轮廓

轮廓按钮从当前色彩应用继承他们的边框颜色。

圆角

圆角按钮的行为与常规按钮相同,但具有圆角边缘。

块状

块状按钮可以扩展全部可用宽度

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore