[Day 6]中秋时在做什麽，有没有空，可以帮想标题吗(前端篇)
今天来实作Navite Camp的Nav，看官们可以点网址去看他的效果，因为没有时间，滑鼠移动到各tab时下面橘色border会滑顺的移动，这个暂时没时间去实作。
先上成果对照图
Navite Camp
今日实作
可以看到这边有一个Bug需要解决，这边应该会重新refactor一下架构，开发的太丑了，每一个都直接Ctrl + c，应该要把每个tab给切成componemt在用tab list foreach去呼叫template比较好。
我这边文字以及border实现hover都很简单只是切换颜色，但图片是两张不同的图片，我这边去抓取onMouseEnter,onMouseLeave因为都是复制的区块，所以一个onMouseEnter就全部都会切换，这边是明天要来refactor的地方。
这边使用简单的isHovering去做判断滑鼠事件
const [isHovering, setIsHovered] = useState(false);
const onMouseEnter = () => setIsHovered(true);
const onMouseLeave = () => setIsHovered(false);
在li中加入onMouseEnter、onMouseLeave就可以知道是不是hovering
<li
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
知道是不是hovering就可以判断要render哪个Image
{isHovering ? (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_home-h.svg"
layout="fill"
objectFit="contain"
/>) : (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_home.svg"
layout="fill"
objectFit="contain"
/>)}
完整code
Nav.js
import React, { useState } from 'react';
import Image from 'next/image';
function Nav() {
const [isHovering, setIsHovered] = useState(false);
const onMouseEnter = () => setIsHovered(true);
const onMouseLeave = () => setIsHovered(false);
return (
<div className="">
<ul className="flex flex-row items-center justify-center pt-2 border-b">
<li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
<div className="space-y-2 w-48 flex justify-center items-center flex-col">
<div className="relative flex h-[28px] w-[28px]">
{isHovering ? (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_home-h.svg"
layout="fill"
objectFit="contain"
/>
) : (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_home.svg"
layout="fill"
objectFit="contain"
/>
)}
</div>
<div className="pb-2" >
<span className="text-sm">首页</span>
</div>
</div>
</li>
<li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
<div className="space-y-2 w-48 flex justify-center items-center flex-col">
<div className="relative flex h-[28px] w-[28px] ">
{isHovering ? (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_guide-h.svg"
layout="fill"
objectFit="contain"
/>
) : (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_guide.svg"
layout="fill"
objectFit="contain"
/>
)}
</div>
<div className="pb-2" >
<span className="text-sm">指南</span>
</div>
</div>
</li>
<li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
<div className="space-y-2 w-48 flex justify-center items-center flex-col">
<div className="relative flex h-[28px] w-[28px]">
{isHovering ? (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_study-h.svg"
layout="fill"
objectFit="contain"
/>
) : (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_study.svg"
layout="fill"
objectFit="contain"
/>
)}
</div>
<div className="pb-2" >
<span className="text-sm">学习</span>
</div>
</div>
</li>
<li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
<div className="space-y-2 w-48 flex justify-center items-center flex-col">
<div className="relative flex h-[28px] w-[28px]">
{isHovering ? (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_search-h.svg"
layout="fill"
objectFit="contain"
/>
) : (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_search.svg"
layout="fill"
objectFit="contain"
/>
)}
</div>
<div className="pb-2" >
<span className="text-sm">搜寻・预约讲师</span>
</div>
</div>
</li>
<li className="w-48 flex items-center justify-center cursor-pointer text-nativeCamp-nav-text hover:text-nativeCamp-nav-textHov border-b-4 border-white hover:border-nativeCamp-nav-textHov"
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
<div className="space-y-2 w-48 flex justify-center items-center flex-col">
<div className="relative flex h-[28px] w-[28px]">
{isHovering ? (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_etc-h.svg"
layout="fill"
objectFit="contain"
/>
) : (
<Image
src="https://nativecamp.net/user/images/gnavi/ic_etc.svg"
layout="fill"
objectFit="contain"
/>
)}
</div>
<div className="pb-2" >
<span className="text-sm">其他</span>
</div>
</div>
</li>
</ul>
</div>
)
}
export default Nav
後来我认真看之後才发现Nav是跟header再一起的，应该是为了页面往下滑要做效果变换，所以我就把Nav加在header.js中，
import Image from "next/image";
import Nav from "./Nav";
function Header() {
return (
<header >
<div className="bg-nativeCamp-header-bg h-header flex justify-center items-center">
<div className="flex items-center">
{/* Left */}
<div className=" m-auto py-4 pr-80">
<div className="relative flex h-logo cursor-pointer my-auto">
<Image
src="https://nativecamp.net/user/images/common/logo_s-zh-tw.png?v=2.1"
layout="fill"
objectFit="contain"
objectPosition="left"
/>
</div>
<h1 className="text-white text-headerLogo">
线上英语会话的NativeCamp.7天免费体验进行中！
</h1>
</div>
{/* Right */}
<div className=" pl-80 mb-4 space-y-2">
<ul className="flex justify-end ">
<li>
<a
className="text-white text-sm hover:text-opacity-75"
href="https://nativecamp.net/zh-tw/tutors"
>
FOR TUTORS
</a>
</li>
</ul>
<ul className="flex space-x-2">
<li>
<a className='bg-nativeCamp-header-signup hover:bg-nativeCamp-header-signupHov text-white text-center text-xs py-2 px-6 rounded-sm cursor-pointer'>注册</a>
</li>
<li>
<a className='bg-nativeCamp-header-login hover:bg-nativeCamp-header-loginHov text-white text-center text-xs py-2 px-6 rounded-sm cursor-pointer'>登入</a>
</li>
<li>
<a className="bg-transparent hover:border-opacity-75 border border-bg-white text-white text-center text-xs p-2 px-4 rounded-sm cursor-pointer">重新加入</a>
</li>
</ul>
</div>
</div>
</div>
{/* Nav */}
<div>
<Nav />
</div>
</header>
);
}
export default Header;
今天就先实作到这边，明天再来refactor以及改好hovering的效果显示。
>>: [Day 16] Leetcode 763. Partition Labels (C++)
Day10 NiFi - Templates, Labels & Funnel
今天我们要讲的东西有点多，要一次讲三个，分别是 Templates, Labels & Fu...
Mysql有那些变数？如何设定？以及有那些值得认识的配置选项呢？
前文提到mac电脑启动mysql的方式为 brew services start mysql 其实我...
基础统计－认识基本图表与用途
不管是数据分析的过程还是分析结果的呈现，都推脱离不了「数据可视化」，将数据用图表呈现。然而我们该用哪...
如何用笔电连线到HPE服务器
请问各位电脑高手 我现在把我的笔电跟HPE服务器的IP网段都已经设定成一样的 但是开启网页输入还是无...
Day 05 JavaScript 同步(Sync) vs 非同步(Async)处理
笔者一开始看到这两个词的时候充满着黑人问号??? 同步不是应该表示可以同时处理多件事， 而非同步不是...