Material Design风格神框架vuetify 学习笔记(三) 基础组件1

一. 按钮 (V-BTN)

参考文档:https://vuetifyjs.com/zh-Hans/components/buttons/https://vuetifyjs.com/zh-Hans/api/v-btn/

1. 按钮的颜色

我们可以用class 或者 color来控制按钮的颜色

<v-btn color="pink">text</v-btn>
    <v-btn dark color="pink">text</v-btn>
    <v-btn class="pink">text</v-btn>
    <v-btn class="pink white--text">text</v-btn>

也可以使用系统颜色:

<v-btn color="success"> success </v-btn>
    <v-btn color="info"> info </v-btn>
    <v-btn color="error"> error </v-btn>
...

2. 按钮样式

(1). 扁平化按钮 (depressed )

<v-btn depressed class="pink white--text">text</v-btn>

(2). 透明背景按钮 (plain )

<v-btn plain color="pink">text</v-btn>

(3). 轮廓线按钮 (outlined)

<v-btn outlined color="pink">text</v-btn>

(4). 圆角按钮 (rounded )

<v-btn rounded color="pink white--text">text</v-btn>

(5). 圆形浮动按钮 (fab)

<v-btn fab color="pink white--text">text</v-btn>

(6). 文本按钮 (text)

文本按钮没有华丽的样式, 颜色属性只设置文本颜色

<v-btn text color="pink">text</v-btn>

(7). 凸起的按钮 raised

凸起的按钮有更夸张的阴影和点击效果

<v-btn raised color="pink white--text">text</v-btn>

点击时有递增的阴影

(8). 瓷砖按钮(无圆角按钮) tile

<v-btn tile  color="pink white--text">text</v-btn>

3 . 图标按钮

<v-btn color="pink white--text">
      <v-icon>mdi-heart</v-icon>
    </v-btn>
    <v-btn fab color="orange white--text">
      <v-icon>mdi-email</v-icon>