iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 13

[Day 13] 實作-頂端工具列 v-app-bar v-icon

昨天有先學習vuetify的佈局,今天就可以來實作了

先看一下之前設計的UI,其實蠻簡單的就是上方一個app-bar,下方一個content包住,再看要渲染什麼東西即可

https://ithelp.ithome.com.tw/upload/images/20210928/20140745z3xPm0kX6z.png

拿昨天的範例程式改一下大約會長這樣

<!-- 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-toolbarv-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

https://ithelp.ithome.com.tw/upload/images/20210928/20140745AdQ9IYkoq5.png

加入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的地方好像怪怪的~

怎麼會是跑出文字呢?

https://ithelp.ithome.com.tw/upload/images/20210928/20140745M7kCBhRFYa.png

安裝 icon 包

我翻了一下Vuetify文檔發現,icon 預設使用 Material Design icons,另外也支援 Material IconsFont Awesome 4 IconsFont 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);

成果

https://ithelp.ithome.com.tw/upload/images/20210928/20140745ReeACkIYzc.png


今天先這樣!

明天來把分頁加上去


上一篇
[Day 12] 切版就從佈局開始 Application
下一篇
[Day 14] 實作-頁面選單 v-menu v-btn
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

尚未有邦友留言

立即登入留言