美文网首页
Material Design风格神框架vuetify 学习笔记

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

作者: 熊爸天下_56c7 | 来源:发表于2021-08-24 14:28 被阅读0次

    一. 按钮 (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 学习笔记

          本文链接：https://www.haomeiwen.com/subject/pbrdiltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Material Design风格神框架vuetify 学习笔记|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！