登录
首页 >  文章 >  前端

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

来源：dev.to

时间：2024-09-29 09:49:04 441浏览 收藏

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

使用 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>
  • 具有 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;

    结论

    恭喜！您已经使用 react 和 tailwind css 成功构建了响应式标头。该组件具有徽标、导航链接、注册按钮和适用于移动设备的汉堡图标。有了这个基础，您可以通过添加更多链接、更改样式或将其集成到更大的应用程序中来进一步自定义标题。

    常见问题解答

    q1：tailwind css 是什么？

    tailwind css 是一个实用程序优先的 css 框架，它提供低级实用程序类来快速构建自定义设计。与传统的 css 框架不同，tailwind 提倡一种更加基于组件的样式方法。

    q2：为什么使用 react 作为 header 组件？

    react 是一个用于构建用户界面的强大 javascript 库。使用 react 使我们能够创建可重用的组件、有效地管理状态并提高应用程序的整体性能。

    问题3：如何进一步自定义标题？

    您可以通过添加更多链接、更改颜色甚至添加下拉菜单来自定义标题。 tailwind css 可以轻松地直接在 jsx 中更改样式。

    q4：react 是否需要使用 tailwind css？

    不，没有必要将 tailwind css 与 react 结合使用。您可以使用任何 css 框架或自定义 css 样式。然而，tailwind 提供了一种快速有效的方式来设置组件样式，而无需编写自定义 css。

    通过遵循本指南，您现在应该对为自己的项目创建响应式标头充满信心。快乐编码！

    今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

    前往漫画官网入口并下载 ➜
    • 声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除
    相关阅读
    更多>
    最新阅读
    更多>
    课程推荐
    更多>