v-btn 组件用一 material design 主题和大量选项替代了标准的 html 按钮。任何颜色助手类都可以用来改变背景色或文本颜色。
从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。
给组件应用 position: absolute
配置在链接激活时应用的 CSS 类。你能够在 vue-router 文档浏览更多 active-class prop。
设置 append 属性总是会附加到当前路径的相对路径上。你能够在 vue-router 文档浏览更多 append prop。
将按钮扩展到可用空间的 100％。
将组件向底部对齐。
将指定的颜色应用于控件 - 它可以是 material color 的名称（例如 success 或者 purple）或 css 颜色 (#033 或 rgba(255, 0, 0, 0.5))。 你可以在 colors page 中找到内置类的列表。
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
移除按钮的阴影效果。
移除组件的单击或 target 功能。
组件的海拔可接受 0 到 24 之间的值。你可以在 elevation page 浏览更多信息。
完全匹配链接。如果没有这个链接，'/' 将匹配每个路由。你能够在 vue-router 文档浏览更多 exact prop。
配置在精准链接激活时应用的 CSS 类。你能够在 vue-router 文档浏览更多exact-active-class prop。
将按钮指定为 floating-action-button - _round_。
给组件应用 position: fixed
设定组件的高度。
指定组件为锚点并应用 href 属性。
将按钮指定为图标 - round 和 flat
控制按钮的活动状态。
使组件尺寸变的巨大。
将组件向左对齐。 这应该与 absolute 或 fixed 属性一起使用。
为组件设置浅色主题。
指定组件为链接。当使用 href 或 *to * 属性时，这是自动的设置的。
添加一个加载中的图标动画
设定组件的最大高度。
设定组件的最大宽度。
设定组件的最小高度。
设定组件的最小宽度。
使背景透明并使用薄边框。
设置 replace 属性会在点击时调用 router.replace() 而不是 router.push()，这样导航就不会留下历史记录。您可以在 vue-router 文档中浏览更多 replace prop。
点击时不模糊。
将组件向右对齐。这应该与 absolute 或 fixed 属性一起使用。
在按钮上应用较大的边框半径。
Applies a large border radius on the top left and bottom right of the card.
使组件尺寸变的小。
指定在根元素上使用的自定义标签。
指定 target 属性。只在使用 href 属性时应用。
使背景透明。
Removes the component's border-radius.
将组件向顶部对齐。
设置按钮的 type 属性
在组中选择组件时使用的值。如果没有提供，则使用 index。
设定组件的宽度。
使组件尺寸变的无比巨大。
使组件尺寸变的更小。
默认Vue 插槽。
自定义加载器
单击组件时发出的事件
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);当使用 dark 属性时，v-btn 是唯一表现不同的组件。 通常，组件使用 dark 属性来表示它们具有深色背景，并且其文本必须为白色。 虽然这对v-btn 起作用，但由于禁用状态与白色背景混合，建议仅在按钮 IS ON为彩色背景时使用属性。 如果您需要白色文本，只需添加 white--text 类。
下面是一些简单到复杂的例子。
文字按钮没有框影，也没有背景。只有在悬停时才会显示按钮的容器。
凸起的按钮有一个会在在点击时加重的框阴影，这是默认的样式。
凹陷的按钮依然保持其背景色，但没有框阴影。
按钮下拉菜单是带有额外的样式的常规选择框。
图标可作为按钮的主要内容。
浮动按钮是圆形的，通常包含一个图标。
按钮可以被设置不同的尺寸选项以适应多种方案。
轮廓按钮从应用的当前颜色继承其边框。
圆形按钮的行为与常规按钮相同，但具有圆形边缘。
平铺按钮的行为与常规按钮相同，但没有边框半径。
块状按钮可以扩展全部可用宽度
使用加载（loading）属性，你可以通知用户有正在进行的处理。默认行为是使用一个v-progress-circular组件，但可以对齐进行自定义。