Tailwind CSS 예제를 사용한 반응형 Navbar 메뉴 반응
20223 단어 tutorialtailwindcssreactwebdev
도구 사용
리액트 JS
순풍 CSS 3.v
영웅 아이콘
view
먼저 tailwind css로 반응 프로젝트를 설정해야 합니다. 수동으로 설치하거나 아래 블로그를 읽을 수 있습니다.
How to install Tailwind CSS in React
Install & Setup Vite + React + Typescript + Tailwind CSS 3
예 1
tailwind css로 JS 반응형 navbar 메뉴에 반응합니다.
import { useState } from "react";
export default function NavBar() {
const [navbar, setNavbar] = useState(false);
return (
<nav className="w-full bg-white shadow">
<div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
<div>
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<a href="javascript:void(0)">
<h2 className="text-2xl font-bold">LOGO</h2>
</a>
<div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
navbar ? "block" : "hidden"
}`}
>
<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
<li className="text-gray-600 hover:text-blue-600">
<a href="javascript:void(0)">Home</a>
</li>
<li className="text-gray-600 hover:text-blue-600">
<a href="javascript:void(0)">Blog</a>
</li>
<li className="text-gray-600 hover:text-blue-600">
<a href="javascript:void(0)">About US</a>
</li>
<li className="text-gray-600 hover:text-blue-600">
<a href="javascript:void(0)">Contact US</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
);
}
순풍에 반응하는 햄버거 메뉴가 반응합니다.
예 2
Tailwind css 로그인 및 가입 버튼으로 JS 반응형 navbar 메뉴에 반응합니다.
import { useState } from "react";
export default function NavBar() {
const [navbar, setNavbar] = useState(false);
return (
<nav className="w-full bg-purple-500 shadow">
<div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
<div>
<div className="flex items-center justify-between py-3 md:py-5 md:block">
<a href="javascript:void(0)">
<h2 className="text-2xl font-bold text-white">LOGO</h2>
</a>
<div className="md:hidden">
<button
className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
onClick={() => setNavbar(!navbar)}
>
{navbar ? (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-white"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<div>
<div
className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
navbar ? "block" : "hidden"
}`}
>
<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
<li className="text-white hover:text-indigo-200">
<a href="javascript:void(0)">Home</a>
</li>
<li className="text-white hover:text-indigo-200">
<a href="javascript:void(0)">Blog</a>
</li>
<li className="text-white hover:text-indigo-200">
<a href="javascript:void(0)">About US</a>
</li>
<li className="text-white hover:text-indigo-200">
<a href="javascript:void(0)">Contact US</a>
</li>
</ul>
<div className="mt-3 space-y-2 lg:hidden md:inline-block">
<a
href="javascript:void(0)"
className="inline-block w-full px-4 py-2 text-center text-white bg-gray-600 rounded-md shadow hover:bg-gray-800"
>
Sign in
</a>
<a
href="javascript:void(0)"
className="inline-block w-full px-4 py-2 text-center text-gray-800 bg-white rounded-md shadow hover:bg-gray-100"
>
Sign up
</a>
</div>
</div>
</div>
<div className="hidden space-x-2 md:inline-block">
<a
href="javascript:void(0)"
className="px-4 py-2 text-white bg-gray-600 rounded-md shadow hover:bg-gray-800"
>
Sign in
</a>
<a
href="javascript:void(0)"
className="px-4 py-2 text-gray-800 bg-white rounded-md shadow hover:bg-gray-100"
>
Sign up
</a>
</div>
</div>
</nav>
);
}
Reference
이 문제에 관하여(Tailwind CSS 예제를 사용한 반응형 Navbar 메뉴 반응), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/react-responsive-navbar-menu-with-tailwind-css-example-3mah텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
