单行 Vuetify 中的 2 个按钮组件 - Html

在 Vuetify 中，有多种类型的按钮组件可供选择。本篇介绍单行中的 2 个按钮组件。这些按钮组件可用于创建各种动作按钮，如“提交表单”或“取消”。

1.平面按钮

平面按钮是一种简单的按钮，不带阴影或立体效果。它们通常用于次要操作。

<v-btn>Click Me</v-btn>

Props

v-btn 组件支持以下属性:

| 属性 | 类型 | 默认值 | 说明 | | ------- | ------- | ------ | ------------------------------------------------------------------------------------------------- | | color | String | | 在按钮上应用特定的主题颜色。 | | dark | Boolean | false | 将按钮文本设置为暗色调。 | | depressed | Boolean | false | 移除细微阴影和角度，使按钮显示平面化。 | | disabled | Boolean | false | 禁用按钮。 | | fab | Boolean | false | 将按钮更改为浮动操作按钮。此属性需要圆形属性与大小属性。 | | icon | Boolean | false | 将按钮更改为仅包含图标的按钮。此属性需要图标属性。 | | large | Boolean | false | 将按钮更改为大尺寸。 | | loading | Boolean | false | 在按钮上显示加载指示器。 | | outline | Boolean | false | 使按钮成为空心边框。 | | ripple | Object | {} | 可以设置自定义的 Vuetify.Ripple属性。 | | round | Boolean | false | 允许按钮有较小的圆角半径。 | | small | Boolean | false | 将按钮更改为小尺寸。 | | tile | Boolean | false | Tile按钮仅在卡片（或其他具有最小间距的容器）上使用。当按下按钮时，不会添加额外的空间。 | | type | String | button | 将 type属性应用于底层的原生按钮。设置该属性时，请确保在没有Vue触发器的情况下发送适当的事件。 |

2.轮廓按钮

轮廓按钮是具有平面按钮斜率并带有边框的按钮。它们通常用于主要操作。

<v-btn outlined>Click Me</v-btn>

Props

v-btn 组件支持以下附加属性:

| 属性 | 类型 | 默认值 | 说明 | | ------ | ------- | ------ | -------------------------------------------------------------------------------------------------------- | | alt | String | | 与 src 图像一起使用的alt HTML属性。 | | href | String | null | 与v-btn的href属性一起使用，该属性将⼀个有效的链接安装在按钮上。当设置href时，它始终会以button标签方式呈现。 | | target | String | '_self' | 连接的目标。 |

结论

以上是单行 Vuetify 中的 2 个按钮组件。使用这些按钮组件，您可以轻松创建漂亮的按钮，以提供多种操作和功能。了解这些组件的属性和用途，可以帮助您更好地使用 Vuetify 构建功能丰富的 Web 应用程序。