构建 Tailwind CSS 面包屑组件

Tailwind CSS 是我已经使用了相当长一段时间的框架，我必须说，我已经完全放弃了在不久的将来使用任何其他框架的可能性。

然而，在构建新项目时，我感觉缺少一件事：需要一遍又一遍地构建 Web 组件，例如按钮、下拉菜单、导航栏等。

我已经开始了一系列教程，向您展示如何构建网络上最常用的 Web 组件，今天我想向您展示如何使用 Tailwind 中的实用程序类构建面包屑组件。

Tailwind CSS 面包屑组件

面包屑组件是网站常用的元素，用于在层次结构中显示页面的当前位置。

从语义上讲，我们应该使用导航元素和带有链接的订单列表元素。

我们首先只编写 HTML 代码。



<nav aria-label="Breadcrumb">
  <ol>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <div>
        <a href="#">Projects</a>
      </div>
    </li>
    <li aria-current="page">FlowBite</li>
  </ol>
</nav>

如您所见，我们还使用了aria-*属性来使组件可访问。

您应该aria-current="page"在当前活动页面上使用该属性。

现在 HTML 代码已经准备好了，我们可以开始设计面包屑组件的样式了。先从和nav元素开始ol。



<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Projects</a>
    </li>
    <li aria-current="page">FlowBite</li>
  </ol>
</nav>

li太好了，现在让我们开始为列表中的每个元素设置样式。



<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#">Home</a>
    </li>
    <li class="inline-flex items-center">
        <a href="#">Projects</a>
    </li>
    <li class="inline-flex items-center" aria-current="page">FlowBite</li>
  </ol>
</nav>

太棒了！现在让我们设置链接元素的样式。



<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a class="text-gray-700 hover:text-gray-900 inline-flex items-center" href="#">Home</a>
    </li>
    <li class="inline-flex items-center">
        <a class="text-gray-700 hover:text-gray-900 ml-1 md:ml-2 text-sm font-medium" href="#">Projects</a>
    </li>
    <li class="inline-flex items-center" aria-current="page">FlowBite</li>
  </ol>
</nav>

现在让我们最终添加 SVG 箭头，以便组件获得最终形式。



<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="text-gray-700 hover:text-gray-900 inline-flex items-center">
        <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="#" class="text-gray-700 hover:text-gray-900 ml-1 md:ml-2 text-sm font-medium">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="text-gray-400 ml-1 md:ml-2 text-sm font-medium">FlowBite</span>
      </div>
    </li>
  </ol>
</nav>

结果应该如下所示：

具有彩色背景的面包屑导航

您还可以使用此示例来构建使用彩色背景的面包屑元素：



<nav class="flex bg-blue-50 text-blue-700 border border-blue-200 py-3 px-5 rounded-lg mb-4" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="text-blue-700 hover:text-blue-900 inline-flex items-center">
        <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-6 h-6 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="#" class="text-blue-700 hover:text-blue-900 ml-1 md:ml-2 text-sm font-medium">Templates</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-6 h-6 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="text-blue-400 ml-1 md:ml-2 text-sm font-medium">FlowBite</span>
      </div>
    </li>
  </ol>
</nav>

就是这样！希望本教程能帮助您完成 Tailwind CSS 之旅并完成您的项目。

Flowbite - Tailwind CSS 组件库

这个Tailwind 面包屑组件是更大的Tailwind CSS 组件开源库的一部分，您可以立即使用它来通过 Tailwind 更快地构建项目。

它也可以在官方 Github 存储库上克隆或通过 NPM 请求。

文章来源：https://dev.to/themesberg/building-a-tailwind-css-breadcrumb-components-nl8