Material Design风格神框架vuetify 学习笔记

2021-08-24 本文已影响0人熊爸天下_56c7

一. 按钮 (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>
    </v-btn>

4. 按钮的尺寸

属性	说明
x-small	特小
small	小
normal	正常(默认)
large	大
x-large	特大
block	将按钮扩大到可用空间的 100％

    <v-btn x-small color="pink white--text"> x-small </v-btn>
    <v-btn small color="pink white--text"> small </v-btn>
    <v-btn normal color="pink white--text"> normal </v-btn>
    <v-btn large color="pink white--text"> large </v-btn>
    <v-btn x-large color="pink white--text"> x-large </v-btn>
    <v-btn block color="pink white--text"> block </v-btn>

5. 按钮加载中和失效

<v-btn loading color="pink white--text"> TEXT </v-btn>
<v-btn disabled color="pink white--text"> disabled </v-btn>

6. 按钮点击事件

vue 老规矩, @click处理点击事件

<template>
  <div class="home text-center">
    <p></p>
    <v-btn :loading="loading" color="pink white--text" @click="btn_click">
      {{ btn_text }}
    </v-btn>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      loading: false,
      btn_text: "点我",
    };
  },
  methods: {
    btn_click() {
      this.loading = true;
      setTimeout(() => {
        this.btn_text = "感谢点击";
        this.loading = false;
      }, 2000);
    },
  },
};

</script>

7. 超链接 href

<v-btn href="https://www.baidu.com/" color="indigo white--text"> 百度一下 </v-btn>

二. 图标 v-icon

1. 图标的颜色

参考按钮的颜色

2. 和按钮结合使用

    <v-btn class="ma-2" color="primary" dark>
      Accept
      <v-icon dark right> mdi-checkbox-marked-circle </v-icon>
    </v-btn>
    <v-btn class="ma-2" dark>
      <v-icon dark left> mdi-minus-circle </v-icon>Cancel
    </v-btn>
    <v-btn class="ma-2" text icon color="blue lighten-2">
      <v-icon>mdi-thumb-up</v-icon>
    </v-btn>

    <v-btn class="ma-2" text icon color="red lighten-2">
      <v-icon>mdi-thumb-down</v-icon>
    </v-btn>

三. 列表 v-list

v-list 组件用于显示信息。它可以包含头像、内容、操作、列表组标题等等。列表以易于在集合中识别特定项目的方式显示内容。它们为组织一组文本和图像提供了一致的样式。

1. 列表相关标签

(1). 列表标签 v-list

基本列表标签

(2). 列表组标签 v-list-group

有了group才能点击

重要属性

sub-group : 将组件指定为嵌套列表组
no-action : 从组项目中删除分配给操作图标的左边距
eager : 将强制组件内容在加载时呈现。如果存在内容的话，则不会在 DOM 中渲染，如果你想优化 SEO，这是非常有用的。

(3). 列表项目组 v-list-item-group

有了group才能点击

重要属性

value : 选定的条目可以用v-modle绑定
multiple : 多选
max : 最大多选数

(4). 列表项目 v-list-item

重要属性

link : 指定组件为链接。当使用 href 或 ** to ** 属性时，这是自动的设置的。
href : 指定组件为锚点并应用 href 属性
target : 指定 target 属性。只在使用 href 属性时应用
inactive: 不活跃,如果设置了该属性，即使有to/href或者@click，列表块也不会响应链接。
selectable : 允许在 v-list-item 中选择文本。
to : 表示链接的目标路由。

(5). 列表项目内容 v-list-item-content

(6). 列表项目头像 v-list-item-avatar

重要属性

rounded: 对指定的组件应用 border-radius 样式。
left : 指定头像在组件左侧。
rigth: 指定头像在组件的右侧。
horizontal : 使用另一种水平样式。

(7). 列表项目图标 v-list-item-icon

(8). 列表项目标题 v-list-item-title

(9). 列表项目副标题 v-list-item-subtitle

(10). 列表项目动作插槽 v-list-item-action

(11). 列表项目动作插槽文本 v-list-item-action-text

2. v-list-item的单行/双行/三行

列表有三种基本形式。单行 (默认), 双行和三行.

<template>
  <v-card class="mx-auto" max-width="400" tile>
    <v-list>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>单行列表项目</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-list-item two-line>
        <v-list-item-content>
          <v-list-item-title>双行列表项目</v-list-item-title>
          <v-list-item-subtitle>项目副标题</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title>三行列表项目</v-list-item-title>
          <v-list-item-subtitle> 项目副标题 </v-list-item-subtitle>
          <v-list-item-subtitle> 项目副标题 </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

3. 列表的样式

(1). 紧凑型列表 dense

    <v-list dense>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>历史记录</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

(2). 扁平化列表 flat

    <v-list flat>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>历史记录</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

(3). 圆角风格

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list rounded>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>历史记录</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-email</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>联系我们</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

(4). 各种形状风格 shaped

4. 列表的典型的应用

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超级奶爸</v-list-item-subtitle>
          </v-list-item-content>

          <v-list-item-action>
            <v-btn icon>
              <v-icon color="blue lighten-1">mdi-information</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>

        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-email-lock</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超级奶爸</v-list-item-subtitle>
          </v-list-item-content>

          <v-list-item-action>
            <v-btn icon>
              <v-icon color="blue lighten-1">mdi-information</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

数据驱动生成版

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-item-group v-model="selected">
        <v-list-item v-for="link in links" :key="link.text">
          <v-list-item-avatar>
            <v-icon color="amber">{{ link.icon }}</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>


<script>
export default {
  data() {
    return {
      selected: null,
      links: [
        { icon: "mdi-information", text: "首页", route: "/" },
        { icon: "mdi-qqchat", text: "QQ", route: "/qq" },
        { icon: "mdi-wechat", text: "微信", route: "/wechat" },
      ],
    };
  },
};
</script>

5. 列表的嵌套

<v-list rounded>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>历史记录</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-email</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>联系我们</v-list-item-title>
            <v-list-item-group sub-group>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon>mdi-home</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>上海事业部</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon>mdi-home</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>广州事业部</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

6. 列表多选 multiple

    <v-list>
      <v-list-item-group multiple>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超级奶爸</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="red">mdi-heart</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>anny</v-list-item-title>
            <v-list-item-subtitle>Dec 8,2014 可爱宝宝</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

7. 可扩展列表插槽 v-slot:activator

列表可以包含一组项目，这些项目将利用 v-item-group 的激活器插槽在点击时显示。在 v-navigation-drawer 组件中也使用了扩展列表.

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-group no-action>
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>用户信息</v-list-item-title>
          </v-list-item-content>
        </template>
        <v-list-item-group>
          <v-list-item>
            <v-list-item-avatar>
              <v-icon color="amber">mdi-gesture-tap-button</v-icon>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title>熊爸天下200</v-list-item-title>
              <v-list-item-subtitle>Jan 10,2014 超级奶爸</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list-group>
    </v-list>
  </v-card>
</template>

8. 带操作的列表

利用 v-list-item-group，轻松将操作连接到您的磁贴。

    <v-list>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下200</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超级奶爸</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <template v-slot:default="{ active }">
            <v-list-item-action>
              <v-checkbox :input-value="active"></v-checkbox>
            </v-list-item-action>

            <v-list-item-content>
              <v-list-item-title>安全</v-list-item-title>
              <v-list-item-subtitle>保存以上信息</v-list-item-subtitle>
            </v-list-item-content>
          </template>
        </v-list-item>
      </v-list-item-group>
    </v-list>

9. 列表禁用 disabled

10. 列表标题 subheader

    <v-list subheader>
      <v-subheader>用户信息</v-subheader>
      <v-list-item-group multiple>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超级奶爸</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="red">mdi-heart</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>anny</v-list-item-title>
            <v-list-item-subtitle>Dec 8,2014 可爱宝宝</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

11. 列表跳转路由

我们只需要在 v-list-item上加上 to属性绑定好路由即可

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-item-group v-model="selected">
        <v-list-item v-for="link in links" :key="link.text" link :to="link.route">
          <v-list-item-avatar>
            <v-icon color="amber">{{ link.icon }}</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>


<script>
export default {
  data() {
    return {
      selected: null,
      links: [
        { icon: "mdi-information", text: "首页", route: "/" },
        { icon: "mdi-qqchat", text: "QQ", route: "/qq" },
        { icon: "mdi-wechat", text: "微信", route: "/wechat" },
      ],
    };
  },
};
</script>

Material Design风格神框架vuetify 学习笔记

一. 按钮 (V-BTN)

1. 按钮的颜色

2. 按钮样式

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

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

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

(4). 圆角按钮 (rounded )

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

(6). 文本按钮 (text)

(7). 凸起的按钮 raised

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

3 . 图标按钮

4. 按钮的尺寸

5. 按钮加载中和失效

6. 按钮点击事件

7. 超链接 href

二. 图标 v-icon

1. 图标的颜色

2. 和按钮结合使用

三. 列表 v-list

1. 列表相关标签

(1). 列表标签 v-list

(2). 列表组标签 v-list-group

重要属性

(3). 列表项目组 v-list-item-group

重要属性

(4). 列表项目 v-list-item

重要属性

(5). 列表项目内容 v-list-item-content

(6). 列表项目头像 v-list-item-avatar

重要属性

(7). 列表项目图标 v-list-item-icon

(8). 列表项目标题 v-list-item-title

(9). 列表项目副标题 v-list-item-subtitle

(10). 列表项目动作插槽 v-list-item-action

(11). 列表项目动作插槽文本 v-list-item-action-text

2. v-list-item的单行/双行/三行

3. 列表的样式

(1). 紧凑型列表 dense

(2). 扁平化列表 flat

(3). 圆角风格

(4). 各种形状风格 shaped

4. 列表的典型的应用

数据驱动生成版

5. 列表的嵌套

6. 列表多选 multiple

7. 可扩展列表插槽 v-slot:activator

8. 带操作的列表

9. 列表禁用 disabled

10. 列表标题 subheader

11. 列表跳转路由

猜你喜欢

热点阅读