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

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

作者: 熊爸天下_56c7 | 来源:发表于2021-08-25 10:31 被阅读0次

一. 应用栏 V-app-bar

v-app-bar组件通常是站点导航的主要来源。

App-bar组件与drawer配合使用，可以在应用程序中提供导航。

1. appbar的外观风格

(1). 内置风格
<template>
  <div class="text-center">
    <v-app-bar color="success">普通appbar </v-app-bar>
    <p></p>
    <v-app-bar color="success" dense>紧凑appbar </v-app-bar>
    <p></p>
    <v-app-bar color="success" flat>扁平appbar </v-app-bar>
    <p></p>
    <v-app-bar color="success" prominent>加高appbar</v-app-bar>
  </div>
</template>
(2). 指定高度 height

此外, 我们还可以指定高度, 此高度会覆盖所有其他高度设定

    <v-app-bar color="success" height="200">
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
(3). 圆角风格 rounded
<v-app-bar color="success" rounded> </v-app-bar>
(4). 指定背景图片 src
<v-app-bar src="~assets/background.jpg"> </v-app-bar>

2. appbar的子组件

(1) 导航条按钮v-app-bar-nav-icon
<template>
  <div class="text-center">
    <v-app-bar color="success">
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" absolute temporary>
    </v-navigation-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
    };
  },
};
</script>
(2) 导航条标题 v-app-bar-title
    <v-app-bar color="success">
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>

3. 位置

(1) . 固定位置 fixed

给组件应用 position: fixed
无论如何滚动, appbar永远置顶

    <v-app-bar color="success" fixed>
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
(2). 页面绝对定位 absolute

应用 position: absolute 样式到组件.

(3). 页面浮动定位 floating

将 display: inline-flex 应用于组件。

4. 折叠 collapse

    <v-app-bar color="success" collapse>
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>

5. 滚动动作

(1). 滚动时折叠 collapse-on-scroll
    <v-app-bar color="success" fixed collapse-on-scroll>
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
(2). 滚动时隐藏
    <v-app-bar color="success" hide-on-scroll>
      <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
(3). 滚动时显示
<template>
  <div>
    <v-app-bar color="success" fixed inverted-scroll>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
    <p style="height: 30rem; background-color: #789">1</p>
    <p style="height: 30rem; background-color: #654">1</p>
    <p style="height: 30rem; background-color: #132">1</p>
  </div>
</template>
(4). 加高bar滚动时缩小 shrink-on-scroll
<template>
  <div>
    <v-app-bar color="success" prominent fixed shrink-on-scroll>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
    <p style="height: 30rem; background-color: #789">1</p>
    <p style="height: 30rem; background-color: #654">1</p>
    <p style="height: 30rem; background-color: #132">1</p>
  </div>
</template>
(5). 加高bar滚动时淡出图片 fade-img-on-scroll
<template>
  <div>
    <v-app-bar
      color="success"
      prominent
      fixed
      src="~assets/background.jpg"
      shrink-on-scroll
      fade-img-on-scroll
    >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>
    <p style="height: 30rem; background-color: #789">1</p>
    <p style="height: 30rem; background-color: #654">1</p>
    <p style="height: 30rem; background-color: #132">1</p>
  </div>
</template>
(6). 滚动时阴影加深 elevate-on-scroll
    <v-app-bar color="success" fixed elevate-on-scroll>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
    </v-app-bar>

6. 插槽

appbar可以方便的通过插槽插入更加复杂的控件

(1). 插入图片 v-slot:img
    <v-app-bar color="success" fixed prominent shrink-on-scroll>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          src="~assets/background.jpg"
        ></v-img>
      </template>
    </v-app-bar>

(2). 插入扩展组件 v-slot:extension

    <v-app-bar color="success" fixed prominent shrink-on-scroll>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
      <template v-slot:extension>
        <v-tabs align-with-title>
          <v-tab>Tab 1</v-tab>
          <v-tab>Tab 2</v-tab>
          <v-tab>Tab 3</v-tab>
        </v-tabs>
      </template>
    </v-app-bar>

7. 适合搭配appbar的组件

(1). 间隔 v-spacer
    <v-app-bar color="success" fixed>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
      <v-spacer></v-spacer>
      <v-btn icon><v-icon>mdi-antenna</v-icon></v-btn>
      <v-btn icon><v-icon>mdi-heart</v-icon></v-btn>
    </v-app-bar>
(2). 目录 v-menu
    <v-app-bar color="success" fixed>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-app-bar-title>标题</v-app-bar-title>
      <v-spacer></v-spacer>
      <v-btn icon><v-icon>mdi-antenna</v-icon></v-btn>
      <v-btn icon><v-icon>mdi-heart</v-icon></v-btn>
      <v-menu bottom left>
        <template v-slot:activator="{ on, attrs }">
          <v-btn icon v-bind="attrs" v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item>
            <v-list-item-title>选项1</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>选项2</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>选项3</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

二. 工具栏 v-toolbar

v-toolbar组件通常也是站点导航的主要来源。

v-toolbar组件与v-navigation-drawer和v-card配合使用非常有效。可以在应用程序中提供导航。

toolbar很多地方和appbar一致

1. toolbar的外观风格

(1). 内置风格
<template>
  <div class="text-center">
    <v-toolbar color="success">普通toolbar </v-toolbar>
    <p></p>
    <v-toolbar color="success" short>稍矮toolbar </v-toolbar>
    <p></p>
    <v-toolbar color="success" dense>紧凑toolbar </v-toolbar>
    <p></p>
    <v-toolbar color="success" flat>扁平toolbar </v-toolbar>
    <p></p>
    <v-toolbar color="success" prominent>加高toolbar</v-toolbar>
  </div>
</template>
(2). 指定高度 height

此外, 我们还可以指定高度, 此高度会覆盖所有其他高度设定

    <v-toolbar color="success" height="200">
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-toolbar>
(3). 圆角风格 rounded
<v-toolbar color="success" rounded> </v-toolbar>
(4). 指定背景图片 src
<v-toolbar src="~assets/background.jpg"> </v-toolbar>

2. appbar的子组件

(1) 导航条按钮v-app-bar-nav-icon

和appbar用法一样

(2) 导航条标题 v-app-bar-title

和appbar用法一样

3. 位置

(1) . 固定位置 fixed

和appbar用法一样

(2). 页面绝对定位 absolute

应用 position: absolute 样式到组件.

(3). 页面浮动定位 floating

将 display: inline-flex 应用于组件。
特别适合用在组件之上浮动工具栏

<template>
  <v-card
    class="pa-4"
    flat
    height="300px"
    img="https://cdn.vuetifyjs.com/images/toolbar/map.jpg"
  >
    <v-toolbar
      dense
      floating
    >
      <v-text-field
        hide-details
        prepend-icon="mdi-magnify"
        single-line
      ></v-text-field>

      <v-btn icon>
        <v-icon>mdi-crosshairs-gps</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
  </v-card>
</template>

4. 折叠 collapse

和appbar用法一样

5. 滚动动作

(1). 滚动时折叠 collapse-on-scroll

和appbar用法一样

(2). 滚动时隐藏

和appbar用法一样

(3). 滚动时显示

和appbar用法一样

(4). 加高bar滚动时缩小 shrink-on-scroll

和appbar用法一样

(5). 加高bar滚动时淡出图片 fade-img-on-scroll

和appbar用法一样

(6). 滚动时阴影加深 elevate-on-scroll

和appbar用法一样

6. 插槽

toolbar可以方便的通过插槽插入更加复杂的控件
和appbar用法一样

7. 应用举例: 跟随上下文操作

<template>
  <div class="text-center">
    <v-toolbar
      dark
      :color="selection.length ? 'grey darken-4' : 'deep-purple accent-4'"
    >
      <v-app-bar-nav-icon v-if="!selection.length"></v-app-bar-nav-icon>
      <v-btn v-else icon @click="selection = []">
        <v-icon>mdi-close</v-icon>
      </v-btn>
      <v-toolbar-title>
        {{ selection.length ? `已选: ${selection.length} ` : "请选择服务员" }}
      </v-toolbar-title>

      <v-spacer></v-spacer>

      <v-scale-transition>
        <v-btn v-if="selection.length" key="export" icon>
          <v-icon>mdi-export-variant</v-icon>
        </v-btn>
      </v-scale-transition>
      <v-scale-transition>
        <v-btn v-if="selection.length" key="delete" icon>
          <v-icon>mdi-delete</v-icon>
        </v-btn>
      </v-scale-transition>

      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
      <v-checkbox
        v-for="item in items"
        v-model="selection"
        :label="item"
        :value="item"
        :key="item"
      ></v-checkbox>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selection: [],
      items: ["貂蝉", "西施", "王昭君", "杨玉环"],
    };
  },
};
</script>

三. 系统栏 v-system-bar

v-system-bar 组件可以用于向用户显示状态。 它看起来像Android系统栏，可以包含图标、空格和一些文本

  • lights-out 属性可以来降低不透明度

1. 类似手机状态栏风格

<template>
  <div class="home">
    <v-system-bar color="orange" lights-out>
      <v-icon x-small>mdi-message</v-icon>
      <span>10 unread messages</span>
      <v-spacer></v-spacer>
      <v-icon x-small>mdi-wifi-strength-4</v-icon>
      <v-icon x-small>mdi-signal-cellular-outline</v-icon>
      <v-icon x-small>mdi-battery</v-icon>
      <span>12:30</span>
    </v-system-bar>
  </div>
</template>

2. 类似windows窗口风格

    <v-system-bar color="orange" lights-out window>
      <v-icon>mdi-skull-scan</v-icon>
      <span>新建文件夹</span>
      <v-spacer></v-spacer>
      <v-icon>mdi-minus</v-icon>
      <v-icon>mdi-checkbox-blank-outline</v-icon>
      <v-icon>mdi-close</v-icon>
    </v-system-bar>

相关文章

网友评论

      本文标题：Material Design风格神框架vuetify 学习笔记

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

      延伸阅读

      深度阅读

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

      栏目导航

      热点阅读

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

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

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

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

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

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