当前位置： 首页>数据库>正文

Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表

数据库2024-10-21 04:07:58

一. 按钮 (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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第1张

也可以使用系统颜色:

    <v-btn color="success"> success </v-btn>
    <v-btn color="info"> info </v-btn>
    <v-btn color="error"> error </v-btn>
...
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第2张

2. 按钮样式

(1). 扁平化按钮 (depressed )
<v-btn depressed class="pink white--text">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第3张
(2). 透明背景按钮 (plain )
<v-btn plain color="pink">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第4张
(3). 轮廓线按钮 (outlined)
<v-btn outlined color="pink">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第5张
(4). 圆角按钮 (rounded )
<v-btn rounded color="pink white--text">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第6张
(5). 圆形浮动按钮 (fab)
<v-btn fab color="pink white--text">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第7张
(6). 文本按钮 (text)

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

<v-btn text color="pink">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第8张
(7). 凸起的按钮 raised

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

<v-btn raised color="pink white--text">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第9张
点击时有递增的阴影
(8). 瓷砖按钮(无圆角按钮) tile
<v-btn tile  color="pink white--text">text</v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第10张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第11张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第12张

5. 按钮加载中和失效

<v-btn loading color="pink white--text"> TEXT </v-btn>
<v-btn disabled color="pink white--text"> disabled </v-btn>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第13张
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第14张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第15张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第16张

三. 列表 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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第17张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第18张
(4). 各种形状风格 shaped
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第19张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第20张
数据驱动生成版
<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. 列表的嵌套

Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第21张
<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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第22张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第23张

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>
Material Design风格神框架vuetify 学习笔记(三) 基础组件1 按钮 图标 列表,第24张

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>

https://www.xamrdz.com/database/6x31995579.html

相关文章：