使用 TailwindCSS 和 React 创建自适应导航栏

TailwindCSS 是一个流行的 CSS 框架，它提供了一个基于类名的方法来快速构建美观的 UI 组件。React 是一个流行的 JavaScript 库，用于构建动态 Web 应用程序。在这篇文章中，我们将探讨如何使用 TailwindCSS 和 React 创建自适应导航栏。

前期准备

在开始之前，首先我们需要安装好 TailwindCSS 和 React。可以使用以下命令来完成安装：

npm install tailwindcss react

创建导航栏组件

为了创建导航栏，在 React 中使用函数组件是最为简单和直接的方式。我们将创建一个 Navbar 组件。

import React from 'react';

function Navbar() {
  return (
    <nav className="flex items-center justify-between flex-wrap bg-indigo-500 p-6">
      <div className="flex items-center flex-shrink-0 text-white mr-6">
        <svg className="h-8 w-8 mr-2 fill-current" viewBox="0 0 24 24">
          <path d="M12 1.5L3 5.5V18.5L12 22.5L21 18.5V5.5L12 1.5Z" />
        </svg>
        <span className="font-semibold text-xl tracking-tight">TailwindCSS Navbar</span>
      </div>
      <div className="block lg:hidden">
        <button className="flex items-center px-3 py-2 border rounded text-indigo-200 border-indigo-400 hover:text-white hover:border-white">
          <svg className="h-3 w-3 fill-current" viewBox="0 0 20 20">
            <path
              fillRule="evenodd"
              d="M20 3H0V5H20V3ZM20 8H0V10H20V8ZM20 13H0V15H20V13Z"
            />
          </svg>
        </button>
      </div>
      <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <div className="text-sm lg:flex-grow">
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white mr-4"
          >
            Docs
          </a>
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white mr-4"
          >
            Examples
          </a>
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white"
          >
            Blog
          </a>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;

以上代码创建了一个导航栏，并包含有品牌标志、菜单按钮和菜单项。其中各个类名的意义可从 TailwindCSS 的文档中查阅。

添加导航栏到页面

我们可以将 Navbar 组件添加到我们的应用程序中，并在必要时进行自定义样式。样式可以通过编写新的 CSS 或添加属性到导航栏组件来实现。

import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    <div>
      <Navbar />
      <main className="container mx-auto p-4">
        <h1 className="text-2xl font-medium mb-4">Hello World!</h1>
        <p className="text-gray-700">
          This is a sample article on how to create a responsive navbar using TailwindCSS and React.
        </p>
      </main>
    </div>
  );
}

export default App;

在此示例中，我们将 Navbar 组件放在页面的顶部，并添加了一个标题和一些营销文案。主要内容显示在页面内部。

响应式导航栏

TailwindCSS 具有创建响应式设计的能力。通过引入不同的类名，可以根据屏幕大小更改导航栏的外观和行为。在 TailwindCSS 中，这是通过移动 Apache 设备类型前缀的方式实现的。例如，为了使“菜单”按钮在手机上可见，我们需要添加 sm:hidden 类名。

<button
  className="flex items-center px-3 py-2 border rounded text-indigo-200 border-indigo-400 hover:text-white hover:border-white lg:hidden sm:hidden"
>
  <svg className="h-3 w-3 fill-current" viewBox="0 0 20 20">
    <path
      fillRule="evenodd"
      d="M20 3H0V5H20V3ZM20 8H0V10H20V8ZM20 13H0V15H20V13Z"
    />
  </svg>
</button>

这里我们扩展了 .hidden 类名，以将按钮从匹配 md 断点的屏幕上删除，以至于在小屏幕上可见。

另外，为了在菜单按钮的关联菜单被点击时隐藏它，我们需要添加 hidden 类名来关闭菜单列表。

function Navbar() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <nav className="flex items-center justify-between flex-wrap bg-indigo-500 p-6">
      <div className="flex items-center flex-shrink-0 text-white mr-6">
        ...
      </div>
      <div className="block lg:hidden">
        <button
          className="flex items-center px-3 py-2 border rounded text-indigo-200 border-indigo-400 hover:text-white hover:border-white lg:hidden sm:hidden"
          onClick={() => setIsOpen(!isOpen)}
        >
          ...
        </button>
      </div>
      <div className={`${isOpen ? "block" : "hidden"} w-full block flex-grow lg:flex lg:items-center lg:w-auto`}>
        <div className="text-sm lg:flex-grow">
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white mr-4"
          >
            Docs
          </a>
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white mr-4"
          >
            Examples
          </a>
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white"
          >
            Blog
          </a>
        </div>
      </div>
    </nav>
  );
}

在上面的例子中，我们使用了 useState 钩子来在菜单按钮上添加一个点击处理程序，以便为开关菜单对象的状态和类设置条件。这是如何在导航栏的剩余部分中添加动态类名称。

总结

本文介绍了如何使用 TailwindCSS 和 React 来创建自适应导航栏。我们探讨了许多关于 TailwindCSS 和 React 的核心概念，例如类名和函数组件。希望这篇文章能够为您提供指导，使您能够创建出美观高效的导航栏并集成到您的 React 应用程序中。

示例代码：

import React from 'react';

function Navbar() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <nav className="flex items-center justify-between flex-wrap bg-indigo-500 p-6">
      <div className="flex items-center flex-shrink-0 text-white mr-6">
        <svg className="h-8 w-8 mr-2 fill-current" viewBox="0 0 24 24">
          <path d="M12 1.5L3 5.5V18.5L12 22.5L21 18.5V5.5L12 1.5Z" />
        </svg>
        <span className="font-semibold text-xl tracking-tight">TailwindCSS Navbar</span>
      </div>
      <div className="block lg:hidden">
        <button
          className="flex items-center px-3 py-2 border rounded text-indigo-200 border-indigo-400 hover:text-white hover:border-white lg:hidden sm:hidden"
          onClick={() => setIsOpen(!isOpen)}
        >
          <svg className="h-3 w-3 fill-current" viewBox="0 0 20 20">
            <path
              fillRule="evenodd"
              d="M20 3H0V5H20V3ZM20 8H0V10H20V8ZM20 13H0V15H20V13Z"
            />
          </svg>
        </button>
      </div>
      <div className={`${isOpen ? "block" : "hidden"} w-full block flex-grow lg:flex lg:items-center lg:w-auto`}>
        <div className="text-sm lg:flex-grow">
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white mr-4"
          >
            Docs
          </a>
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white mr-4"
          >
            Examples
          </a>
          <a
            href="#responsive-header"
            className="block mt-4 lg:inline-block lg:mt-0 text-indigo-200 hover:text-white"
          >
            Blog
          </a>
        </div>
      </div>
    </nav>
  );
}

export default Navbar;
import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    <div>
      <Navbar />
      <main className="container mx-auto p-4">
        <h1 className="text-2xl font-medium mb-4">Hello World!</h1>
        <p className="text-gray-700">
          This is a sample article on how to create a responsive navbar using TailwindCSS and React.
        </p>
      </main>
    </div>
  );
}

export default App;

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3d53eadd4f0e0ffc002bf

阅读全文

纠错反馈

精选内容

相关推荐

    暂无