「全端挑戰」Scss與React Component的動態實作Navbar與Header

14th鐵人賽全端工程師 scss navbar react components

K.o

2022-09-19 10:04:23

14999 瀏覽

分享至

鐵人賽 Day4 自己做一個價值幾十萬的動態網站

第四課：了解Scss與React Component與首頁概念圖與UI實作 part2

前言Day3 Github連結

給中途加入挑戰的夥伴，想要直接下載前一天完成的部分開始自己練習，這邊有Day3連結完成後的連接，記得github抓下來的檔案要npm i ，不太會抓取github連接的Day2的最下面有教學

Scss styling排版練習

昨天我們創建第一個最原始Component，現在要來架設好所有環境，讓root component App.js 導流到home 再到navbar，與開始進入styling排版練習。

並先做一些基礎css配置在app.scss裡面打上或是你也可以在index.css裡面打上這些，因為app跟index都算是root都可以涵蓋所有UI

* {
    font-family: "Open Sans", sans-serif;
    margin: 0;
}
:root{
    --primary-color: rgb(53, 164, 127);
}

* 就是classname全部網站的意思，全部都這樣style 裝飾
margin = 0 代表整個html網頁不留白邊，如果沒有打你整個網頁都會有白色框框在外圍。
然後也可以先設置主色調的代表變數 :root 是代表html 一開始導入的區塊是id = root 然後app.jsx用reactDOM抓id的那邊
基本上就跟 *同樣概念，但可以先設立主色調variable的概念

與在home.scss裡面打上

.home {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}

這邊可以爬文css相關語言一開始就像字典一樣常常需要邊做邊查，但熟悉後
display: flex;這邊就可以解讀為"<div>開始固定"，比較好記，因為會常常搭配
justify-content: center;（可以記縮寫jcc直接打也是當快捷鍵）一個寬的置中
align-items: center;（可以記縮寫aic）一個長的置中
但這邊排版要注意我只用到jcc就必須配搭width: 100%; 你要先設置全寬他置中才會在網站中間，所以只打align-items: center;卻沒有打height:100%也是一樣，他就會等於沒打，就像你叫人家去100公尺比賽的中間卻沒跟他說100公尺有多長，如果又沒有打display: flex;下面 jcc, aic, flex-direction: column;也都沒有用了
最後記得在home.jsx與app.jsx這些 component 分別在上方輸入

import "./home.scss" 與 import "./app.scss"

讓scss排版起效

創建NavBar Component

這邊礙於篇幅限制，我只特別舉例我這樣設置的理由，並可能需要時不時跳回去day3那邊的UI分析設計，邊做邊與這邊實作原理搭上線

並附上Navbar.jsx的內容 div圖層關係

<div className='navbar'>
            <div className="navbarContainer">
                <div className="lineOne">
                    <div className="left">
                    <span className="logo">SAM.BOOKING</span>
                    </div>
                    <div className="right">
                    <button className='navButtonFlag'/>
                    <button className="navButtonNotif">使用webpack測試</button>
                    <button className="navButton">註冊</button>
                    <button className="navButton">登入</button>
                    </div>
                </div>
                <div className="lineTwo">
                        <div className="item active">
                            <FontAwesomeIcon icon={faBed} />
                            <span >住宿</span>
                        </div>
                        <div className="item">
                            <FontAwesomeIcon icon={faPlane} />
                            <span >航班</span>
                        </div>
                        <div className="item">
                            <FontAwesomeIcon icon={faCar} />
                            <span >租車</span>
                        </div>
                        <div className="item">
                            <FontAwesomeIcon icon={faToriiGate} />
                            <span >景點/活動</span>
                        </div>
                        <div className="item">
                            <FontAwesomeIcon icon={faTaxi} />
                            <span >機場計程車</span>
                        </div>
                </div>

            </div>
        </div>

navbar.scss內容物可以自己去修改就可以知道那些元素是什麼
在排版上可以客製化你想要的樣子

.navbar {
    width: 100%;
    height: 160px; //整個欄高
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    .navbarContainer {
        width: 90%;
        height: 100%;
        max-width: 1024px;
        color: white;
        .lineOne {
            display: flex;
            height: 50%; //nav整個欄高的一半
            align-items: center;
            justify-content: space-between; //分開左右半部
            .left {
                display: flex;
                span {
                    font-size: 20px;
                    font-weight: 500;
                }
            }
            .right {
                display: flex;
                align-items: center; 
                .navButtonFlag {
                    border-radius: 50%; 
                    height: 30px;
                    width: 30px;
                    border: none;
                    background-image: url("https://q-xx.bstatic.com/backend_static/common/flags/new/48-squared/tw.png");
                    background-size: cover;//國旗背景全cover，可以試試看container你就會發現它填不滿這個區塊
                    &:hover {
                        cursor: pointer;
                        border: 1px solid lightgray;
                    }
                }               
                .navButtonNotif {
                    font-size: 14px;
                    margin-left: 10px;
                    padding: 8px 16px;
                    border: white 1px solid;
                    background-color: rgb(53, 164, 127);
                    color: white;
                    &:hover {
                        background-color: rgba(255, 255, 255, 0.14);
                    }
                }
                .navButton {
                    font-size: 14px;
                    margin-left: 10px;
                    border: none;
                    border-radius: 2px;
                    padding: 8px 16px;
                    cursor: pointer;
                    color: rgb(53, 164, 127);
                }
            }
        }
        .lineTwo {
            display: flex;
            height: 50%;
            align-items: flex-start;//可以center置中 但我想讓lineTwo靠近lineOne近一點所以用flex-start
                gap: 20px;//每隔btn的間距
                .item {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    border-radius: 25px;
                    padding: 10px 15px;
                   
                    &:hover {
                        background-color: rgba(255, 255, 255, 0.14);
                    }
                }
            
        }
    }
}
.active {
    border: white 1px solid;
    background-color: rgba(255, 255, 255, 0.14);
}

之後將會將重點放在比較多fetchdata抓取資料的過程，這邊跟header可以自己練習一下排版！

這邊將分享兩個常用的scss語法與細節將很常會用的語句變成variable變數就可以不用重複打，如主色系在上面app.scss裡面有導入:root{ --primary-color:..}導入得用法
並用var()叫出primary-color這些變數var

或是使用css selector 使用＆來在scss裡面排版
navbar__container 在scss裡面可以用＆來帶出__container
區塊就不用全部重打navbar__container 或是命名的很長navbarContainer

但這邊不做上面那樣，原因是缺點那樣，選擇列不要那麼多又可以有一些可讀性
這邊lineTwo只特別介紹的五個button設計中active的用法
active很常用來使用預設框框或是點選後換到其他button，並對有active的物件有點像是點擊後有白匡等等的這邊也常常會應用在navbar運作原理未來可以特別再多做一篇

與import 特殊icon 用npm i @fortawesome/react-fontawesome 與npm i @fortawesome/free-solid-svg-icons 來導入那些漂亮icon

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faBed, faCar, faPlane, faTaxi, faToriiGate } from '@fortawesome/free-solid-svg-icons'
 <FontAwesomeIcon icon={faBed} />

使用方式為上述FontAwesomeIcon lib 直接使用並去抓你想要的 icon fa就是為icon開頭
icon抓有床的那個
https://fontawesome.com/icons 相關icon使用可以在這邊挑自己喜歡的

創建Header Component

Searchbar會留到Day5

導入成功後將header 依照上面UI劃分

  <div className='header'>
      <div className="headerContainer">
        <h1 className="headerTitle">
          尋找下趟住宿
        </h1>
        <p className="headerDes">搜尋飯店、民宿及其他住宿類型的優惠…
          <br />Booking.com clone挑戰（為SamKo Demo使用不為盈利）</p>
        <div className="headerSearchBar">
          SearchBar
        </div>
      </div>
    </div>

<br/>換行的意思
還有header.scss去做簡單的排版寬高與背景顏色，字體顏色

.header {
    background-color:var(--primary-color);
    display: flex;
    justify-content: center;
    padding: 0px 20px;
    .headerContainer {
        color: white;
        width: 100%;
        max-width: 1024px;
        // background-color: rgb(104, 104, 248);你可以用這個看container範圍
        //container 不包括df 要讓 title des 自由往下排列
        margin: 20px 0px 100px 0px; //margin 四個為上 左 下 右
        .headerTitle {
            font-size: 45px;
        }
        .headerDes{
            margin-top: 10px ;
        }
        .headerSearchBar {
           
        }
    }
}

margin: 20px 0px 100px 0px;中間這裡比較有意思 margin是原本區塊往外擴所以會將container往外擴，但自身本身不變，往外擴會把底色主色調綠色的header的高度拉高，當然你也可以原本就定好高度然後置中，或是使用絕對座標做排版，但因為我想讓他置中偏高所以選擇用margin的做法

padding 0 20px 為header左右內擠20px headerContainer
這邊很常margin 跟padding 指向性不記得就用查的就好

magin-top:外擴上面
magin: 0 20px 外擴上下邊0px 外擴左右邊20px
magin: 0 20px 0px 20px 外擴上邊0px 外擴左邊20px 外擴下邊0px 外擴右邊20px

padding 就內擴
做好後會長這樣

結論

看到這邊的你辛苦了，本作者原本是PM與行銷專業，後來覺得要增加一些自己的硬實力，跨領域自學時，一開始在實作時，最累、最容易犯錯，所以才想讓就算完全不懂的人能夠完全了解每一步的意義，或是能夠越詳細越好，就算不用去上課也能靠自學完成動態網站甚至是開創電商，自己開店創業賺錢！這邊如果內容我也持續修正與修改，盡量讓這次挑戰能夠被有價值的保存與查閱。