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>
    </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>

最后编辑于：2021.08.26 10:22:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,098评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,213评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,960评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,519评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,512评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,533评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,914评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,804评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,563评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,644评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,350评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,933评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,908评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,146评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,847评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,361评论 2赞 342

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

一. 按钮 (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. 列表跳转路由

推荐阅读更多精彩内容

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