[Day 13] 实作-顶端工具列 v-app-bar v-icon

昨天有先学习vuetify的布局，今天就可以来实作了

先看一下之前设计的UI，其实蛮简单的就是上方一个app-bar，下方一个content包住，再看要渲染什麽东西即可

拿昨天的范例程序改一下大约会长这样

<!-- App.vue -->

<v-app>
  <v-app-bar app>
    <!-- -->
  </v-app-bar>
  <!-- 根据应用组件来调整你的内容 -->
  <v-main>

    <!-- 给应用提供合适的间距 -->
    <v-container fluid>

      <!-- 如果使用 vue-router -->
      <router-view></router-view>
    </v-container>
  </v-main>
</v-app>

但是这样只有上下2个框框而已，v-app-bar 里还需要加上Title、搜寻框

v-app-bar 本身就有二个子组件可以用

• v-app-bar-nav-icon

专门为 v-toolbar 和 v-app-bar 创建的 icon按钮组件，通常是用来控制开关工具栏，可以自订义icon跟功能。

• v-app-bar-title

修改过的 v-toolbar-title 组件，用於配合 shrink-on-scroll 属性使用。 差别在於，当萤幕太小时，v-toolbar-title 会被截断，这个组件使用了绝对定位使内容保持在画面内。

增加app-bar

先把上面的范例code加到App.vue的template里， 目前的子组件一样是预设的 HelloWorld.vue

<template>
  <v-app>
    <v-app-bar app>
      <!-- -->
    </v-app-bar>
    <!-- 根据应用组件来调整你的内容 -->
    <v-main>

      <!-- 给应用提供合适的间距 -->
      <v-container fluid>

        <!-- 如果使用 vue-router -->
        <div id="app">
          <img src="./assets/logo.png">
          <router-view/>
        </div>
      </v-container>
    </v-main>
  </v-app>
</template>

在Terminal 输入 npm run dev，就会把程序运行在本地，预设是8080 port

在停止运行之前，只要程序码有修改，他都会自动重新run一次，并把网页更新到最新版

目前执行画面，可以看到上方多了一个 app-bar

加入Title和搜寻栏

<template>
  <v-app>
    <v-app-bar app color="cyan darken-2">
      <v-container class="py-0 fill-height">
        <v-app-bar-title class="title-color">
          艺文资讯整合平台
        </v-app-bar-title>
        <v-spacer></v-spacer>
        <v-responsive max-width="260">
          <v-text-field
            label="搜寻"
            solo
            dense
            flat
            hide-details
            rounded
            append-outer-icon="search"
          >
          </v-text-field>
        </v-responsive>
      </v-container>
    </v-app-bar>
		...
  </v-app>
</template>

<style>
...
.title_color{
  color: white;
}
</style>

目前画面，可以看到 icon的地方好像怪怪的~

怎麽会是跑出文字呢？

安装 icon 包

我翻了一下Vuetify文档发现，icon 预设使用 Material Design icons，另外也支援 Material Icons 、Font Awesome 4 Icons、Font Awesome 5 Icons...等，不管使用哪一个版本都需要手动安装 & 引用才行。

那我平常是使用 google 的 Material Icons 官方文档

如果是一般的静态网页，可以引用CDN即可

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

也可以使用 yarn 或 npm 在本地安装

$ yarn add material-design-icons-iconfont -D
// OR
$ npm install material-design-icons-iconfont -D

安装好後要到 /src/plugins/vuetify.js 引用

// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css'; // 确保您正在使用 css-l

Vue.use(Vuetify);

const opts = {
  icons: {
    iconfont: 'md',
  },
};

export default new Vuetify(opts);

成果

今天先这样！

明天来把分页加上去