当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 React 和 Tailwind CSS 制作响应式标题的终极指南

使用 React 和 Tailwind CSS 制作响应式标题的终极指南

来源：dev.to 2024-09-29 09:49:04 0浏览收藏

golang学习网今天将给大家带来《使用 React 和 Tailwind CSS 制作响应式标题的终极指南》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

使用 react 和 tailwind css 构建响应式标题

创建响应式标头是现代 web 开发的一个基本方面。在本文中，我们将引导您使用 react 和 tailwind css 构建响应式标头组件。本指南是为初学者设计的，因此即使您是这些技术的新手，您也会发现它很容易遵循。我们将逐步分解提供的代码，解释其工作原理以及如何在项目中实现类似的功能。

介绍

标题充当网站的导航区域，提供不同部分的链接以及登录或注册等重要操作。在当今移动优先的世界中，标题具有响应能力至关重要，这意味着它们可以优雅地适应不同的屏幕尺寸。我们将使用 react 来构建我们的组件，并使用 tailwind css 来设计它的样式，确保我们拥有时尚、现代的外观。

入门

在我们深入代码之前，请确保您已经设置了 react 环境。您可以通过运行以下命令使用 create react app 创建新的 react 应用程序：

npx create-react-app responsive-header
cd responsive-header

应用程序设置完成后，您需要安装 tailwind css。您可以按照官方的 tailwind css 安装指南来完成此操作。

设置 tailwind 后，您就可以开始构建我们的标头组件了！

代码的逐步分解

导入所需的库

在 src 文件夹中，创建一个名为 header.js 的新文件。第一步是导入 react 和 usestate 钩子：

import react, { usestate } from "react";

usestate 钩子允许我们管理导航菜单的状态，特别是它是打开还是关闭。

创建标题组件

现在，让我们定义我们的 header 组件。

function header() {
  const [nav, setnav] = usestate(false);
}

在这里，我们初始化一个名为 nav 的状态变量来跟踪导航菜单是打开还是关闭。 setnav 函数将允许我们切换此状态。

渲染标题

接下来，我们将返回标头的 jsx：

return (
  <header>
    <nav classname="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800 shadow">
      <div classname="flex flex-wrap justify-between items-center mx-auto max-w-screen-lg"></div>
</header>

元素：它包装了我们的导航链接，并使用 tailwind css 类进行样式设置。我们设置背景颜色、填充和阴影来创建干净的外观。
具有 flex 属性：这使用 flexbox 来布局导航内的项目。 max-w-screen-lg 类限制标题的最大宽度，确保它在更大的屏幕上看起来不错。

添加徽标

现在，让我们在标题中添加一个徽标：

<a href="#" classname="flex items-center">
  <span classname="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
    logo
  </span>
</a>

此部分包含链接到主页的锚标记，以及徽标文本的 span 元素。应用的类可确保徽标的样式正确，包括深色模式的响应式设计元素。

添加导航菜单

接下来，我们将添加实际的导航项。此部分将根据导航状态是 true 还是 false 进行更改：

<div
  classname={`flex-col md:flex md:flex-row items-center w-full md:w-auto md:order-2 transition-all duration-300 ${
    nav
      ? "absolute top-14 left-0 w-full bg-white shadow-md p-4 md:relative md:top-0 md:w-auto md:bg-transparent md:shadow-none"
      : "hidden md:flex gap-6"
  }`}
></div>

动态类名称：我们使用模板文字根据导航状态有条件地应用类。当nav为true时，菜单可见；否则，它会隐藏在中型和更大的屏幕上。
transition：transition-all和duration-300类在菜单打开或关闭时提供平滑的过渡效果。

创建菜单项

现在，让我们在无序列表中定义菜单项：

<ul classname="flex flex-col md:flex-row md:gap-8 gap-0">
  <li>
    <a
      href="#"
      classname="block py-2 pr-4 pl-3 text-gray-700 rounded md:bg-transparent md:text-primary-700 md:p-0 dark:text-white"
      aria-current="page"
    >
      home
    </a>
  </li>
  <li>
    <a
      href="#"
      classname="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
    >
      pricing
    </a>
  </li>
  <li>
    <a
      href="#"
      classname="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
    >
      contact us
    </a>
  </li>
  <li>
    <a
      href="#"
      classname="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
    >
      sign in
    </a>
  </li>
</ul>

每个列表项 (

) 都包含一个用作链接的锚标记 ()。 tailwind css 类在这里广泛用于样式设计，包括悬停效果和深色模式兼容性。

添加注册按钮

菜单项之后，我们将添加一个注册按钮：

<button
  classname="mt-4 md:mt-0 rounded-full bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
  type="button"
>
  sign up now
</button>

此按钮的设计风格引人注目，并为用户提供了明确的号召性用语。我们添加了悬停和焦点状态以获得更好的用户体验。

为移动设备添加汉堡图标

为了使标题具有响应能力，我们将为移动用户添加一个汉堡菜单图标：

<div classname="md:hidden flex items-center lg:order-1">
  <button
    type="button"
    classname="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
    aria-controls="mobile-menu"
    aria-expanded={nav}
    onclick={() => setnav(!nav)}
  >
    <span classname="sr-only">open main menu</span>
</button>
</div>

此代码创建一个按钮，单击该按钮会切换导航菜单的可见性。 aria-controls 和 aria-expanded 属性增强了可访问性。

处理图标更改

根据导航菜单是打开还是关闭，我们可以显示不同的图标：

{nav ? (
  <svg /* close icon */></svg>
) : (
  <svg /* open icon */></svg>
)}

这种条件渲染使我们能够向用户提供有关菜单状态的视觉提示。

完整的组件代码

现在我们已经完成了每个部分，下面是 header 组件的完整代码：

import React, { useState } from "react";

function Header() {
  const [nav, setNav] = useState(false);

  return (
    <header>
      <nav className="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800 shadow">
        <div className="flex flex-wrap justify-between items-center mx-auto max-w-screen-lg">
          <a href="#" className="flex items-center">
            <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
              Logo
            </span>
          </a>

          <div
            className={`flex-col md:flex md:flex-row items-center w-full md:w-auto md:order-2 transition-all duration-300 ${
              nav
                ? "absolute top-14 left-0 w-full bg-white shadow-md p-4 md:relative md:top-0 md:w-auto md:bg-transparent md:shadow-none"
                : "hidden md:flex gap-6"
            }`}
          >
            <ul className

="flex flex-col md:flex-row md:gap-8 gap-0">
              <li>
                <a
                  href="#"
                  className="block py-2 pr-4 pl-3 text-gray-700 rounded md:bg-transparent md:text-primary-700 md:p-0 dark:text-white"
                  aria-current="page"
                >
                  Home
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                >
                  Pricing
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                >
                  Contact Us
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-primary-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                >
                  Sign In
                </a>
              </li>
            </ul>
            <button
              className="mt-4 md:mt-0 rounded-full bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
              type="button"
            >
              Sign Up Now
            </button>
          </div>

          <div className="md:hidden flex items-center lg:order-1">
            <button
              type="button"
              className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
              aria-controls="mobile-menu"
              aria-expanded={nav}
              onClick={() => setNav(!nav)}
            >
              <span className="sr-only">Open main menu</span>
              {nav ? (
                <svg
                  className="w-6 h-6"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <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"
                  ></path>
                </svg>
              ) : (
                <svg
                  className="w-6 h-6"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              )}
            </button>
          </div>
        </div>
      </nav>
    </header>
  );
}

export default Header;