常見的Header內容有Logo、網站名稱及一些功能按鈕等。
Header 設計
由於我們這次的Side Project希望實作三種地圖設計方式，因此除了Logo、網站名稱外，我會設計三個按鈕來切換不同的地圖設計方法。
以下是我希望在PC及手機上的Header畫面呈現。當畫面解析度變小時，功能按鈕會折行來顯示。
Header建置
首先，新增一個Header.vue以呈現Header裡面要放的內容，以下為完整的程式碼。
Header.vue
<script setup>
defineProps({
msg: {
type: String,
required: true,
},
});
</script>
<template>
<div class="logo-title">
<img alt="Test logo" class="logo" src="../assets/pcr-test.png" />
<h1>{{ msg }}</h1>
</div>
<nav>
<ul>
<li><a href="#/OpenLayersMap">OpenLayersMap</a></li>
<li><a href="#/Leaflet">Leaflet</a></li>
<li><a href="#/GoogleMapApi">GoogleMapApi</a></li>
</ul>
</nav>
</template>
<style scoped>
.logo-title {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.logo {
display: block;
width: 60px;
height: 60px;
margin-top: auto;
margin-bottom: auto;
}
h1 {
font-size: 2.6rem;
font-weight: bold;
color: white;
}
ul {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
color: inherit; /* 移除超連結顏色 */
text-decoration: none; /* 移除超連結底線 */
list-style: none; /* 移除項目符號 */
margin: 0;
padding: 0;
}
li a {
display: block;
color: white; /* 移除超連結顏色 */
font-size: 1.2rem;
text-decoration: none; /* 移除超連結底線 */
padding: 10px;
}
ul li:hover {
background-color: black;
color: white;
padding: 0 20px;
}
</style>
這邊將程式碼拆開來解釋一下，在HTML的部分，可分成兩個區塊分別為logo-title及nav。其目的是可以方便透過CSS的display:flex呈現PC及手機下我們要的效果。
後續會增加display如何使用的內容。
logo-title
先介紹在logo-title的部分，這區塊放了<img>及<h1>分別呈現Logo及網站名稱。
<div class="logo-title">
<img alt="Test logo" class="logo" src="../assets/pcr-test.png" />
<h1>{{ msg }}</h1>
</div>
在<img>我們將其類別命名為Logo，並透過CSS將其變成區塊元素並設定寬、高及上下的margin，以讓圖片可以對齊網站名稱。
.logo {
display: block;
width: 60px;
height: 60px;
margin-top: auto;
margin-bottom: auto;
}
在<h1>這邊只是簡單加一個文字，只是這邊特別練習了一下Vue的props的功能，讓我們可以透過App.vue這個父元件取得要呈現的文字。
因此，可以看到在<script>特別透過defineProps定義了msg以接收父元件傳過來的文字。
<script setup>
defineProps({
msg: {
type: String,
required: true,
},
});
</script>
未來Vue的教學我們會在特別教props的功能。
針對<h1>的CSS主要是調整顏色及大小。
h1 {
font-size: 2.6rem;
font-weight: bold;
color: white;
}
最後透過CSS設計整個logo-title<div>的樣式，達到對齊不折行的效果。
.logo-title {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
nav
在nav的部分，這區塊透過<ul>及<li>這個產生含有超連結的list的標籤，若不知道的朋友可以看一下這篇裡的ol、ul、li 列表 。
<nav>
<ul>
<li><a href="#/OpenLayersMap">OpenLayersMap</a></li>
<li><a href="#/Leaflet">Leaflet</a></li>
<li><a href="#/GoogleMapApi">GoogleMapApi</a></li>
</ul>
</nav>
但是我們希望按鈕是要橫向併排呈現，因此透過CSS的display、justify-content、flex-wrap達到併排呈現且不折行的效果。 此外，由於我們是透過超連結來讓網站可以換頁，超連結本身具有CSS的樣式， 我們必須將其CSS移除。
如何移除超連結樣式，可以參考以下程式碼的註解。
ul {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
color: inherit; /* 移除超連結顏色 */
text-decoration: none; /* 移除超連結底線 */
list-style: none; /* 移除項目符號 */
margin: 0;
padding: 0;
}
li a {
display: block;
color: white; /* 移除超連結顏色 */
font-size: 1.2rem;
text-decoration: none; /* 移除超連結底線 */
padding: 10px;
}
最後，透過ul li:hover增加當滑鼠移動到button時，會變更背景及文字顏色等效果。
ul li:hover {
background-color: black;
color: white;
padding: 0 20px;
}
App.vue
最後，在App.vue新增<script>將Header.vue這個組件引用進來並加入到先前設計<header> Layout的裡面。
前面有提到<Header>需要App.vue提供標題內容，在此透過msg="快篩試劑查詢將這段文字傳到<Header>呈現。
在CSS我們透過display、justify-content、flex-wrap達到並排呈現且當畫面太小會折行的效果。也移除了高度的設定，因為設定高度當在手機畫面呈現折行時， 會造成內容無法完整呈現。
App.vue
<script setup>
import Header from "./components/Header.vue";
</script>
<template>
<header>
<Header msg="快篩試劑查詢" />
</header>
<main> main
</main>
<footer>footer
</footer>
</template>
<style>
@import "./assets/base.css";
header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: rgb(255, 174, 0);
}
main{
height: 820px;
}
footer {
height: 30px;
background-color: rgb(255, 174, 0);
}
成果
以下為Header在電腦跟手機上的效果。
總結
今天先實作了網站的Header，下次會實作Router，讓我們點擊按鈕時，可以變更main的內容。