用 ReactIcon 显示图标，在 imdb 克隆的 Part1 头部创建

2 年 ago
科, 颖
1 minute

简而言之

目录

 

这次将实现头部的一部分。
将根据显示屏的尺寸来实现UI的变动。
下面的gif动画展示了在改变显示屏尺寸时的情况。

imcb1.gif

开发环境

操作系统：Windows10
集成开发环境：VSCode

“@next/font”: “13.1.5”,
“autoprefixer”: “10.4.14”,
“eslint”: “8.39.0”,
“eslint-config-next”: “13.3.1”,
“next”: “13.3.1”,
“postcss”: “8.4.23”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-icons”: “^4.8.0”,
“tailwindcss”: “3.3.2”

“next/font”: “13.1.5”,
“autoprefixer”: “10.4.14”,
“eslint”: “8.39.0”,
“eslint-config-next”: “13.3.1”,
“next”: “13.3.1”,
“postcss”: “8.4.23”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”,
“react-icons”: “^4.8.0”,
“tailwindcss”: “3.3.2”

实施的关键点

当显示器尺寸低于640时，ReactIcon将会显示。请参考下图的处理流程。

image.png

当显示屏尺寸为640-1080像素时，将显示文本而非图标。请参阅下图中的处理流程。

image.png

代码部分

布局

{
  "name": "imcbclone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.1.5",
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "13.3.1",
    "next": "13.3.1",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
    "tailwindcss": "3.3.2"
  }
}

标题

import MenuItem from "./MenuItem";
import {AiFillHome} from "react-icons/ai"
import {BsFillInfoCircleFill} from "react-icons/bs"

export default function Header(){
    return(
        <div>
            <div className="">
                <MenuItem title="HOME" address="/" Icon={AiFillHome} />
                <MenuItem title="ABOUT" address="/about" Icon={BsFillInfoCircleFill} />
            </div>

            <div className="">

            </div>
            Header
        </div>
    )
}

菜单选项

import React from 'react'
import Link from "next/link";

export default function MenuItem({title,address,Icon}) {
  return (
    <div>
        <Link href={address} className="mx-6 lg:mx-0 hover:text-amber-600">
            <Icon className="text-2xl sm:hidden mx-4"/>
            <p className="hidden sm:inline my-2 text-sm">{title}</p>
        </Link>
    </div>
  )
}

请用中文给我提供一个选项。

CSS (层叠样式表)

未来6

 

image.png
image.png

乐购

 

image.png
image.png

字号2XL

 

image.png

 

在中文中，只需要给一个选项：

 

image.png

 

image.png

其他

应对图标

 

Udemy是一家在线学习平台。

 

github提交记录

 

bannerAds