前言
Tab 导航通常是网页中常用的交互形式，用于按分类或功能组织网页内容。在响应式设计中，Tab 导航的显示及交互适配不同的设备分辨率成为挑战。使用 Tailwind 和 React 可以快速解决响应式 Tab 导航的问题。
Tailwind 初探
Tailwind 是一种 CSS 框架，一种样式系统。Tailwind 的特点是选择器基于类名，编写起来同一样式可以通过不同的类名来获得。这种方式被货比三家网站称之为“utility-first”风格。
例如，添加一个按钮的样式可能会写成这样：
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click me </button>
其中，属性 bg-blue-500 表示背景颜色为蓝色，属性 hover:bg-blue-700 表示按钮鼠标悬停状态背景颜色为深色蓝。
React 组件介绍
在使用 React 开发时，可以将 UI 描述成一系列相互嵌套的组件。每个组件都渲染成一个 HTML 元素。
一个 Tabs 组件可以使用 state 保存当前选定的 Tab，然后渲染 Tab 导航栏。
-- -------------------- ---- ------- -------- ------ -------- ----------- -------- -- - ----- ----------- ------------- - --------------------------- ------ - -- ---- ------------------- ------- ------ ---- --------------------- ---- ----------------- ------ ----------------------------- -- ------ -------- -- -- - ------- ----------------- -------------- --------- --- ----------- - --------- -------- -------- --------- - ----------- ------------- -------------------- - --------- ----------- ---- ------ ----------- -- -------------------------- - ---------------- --------- --- ------ ------ ---- ----------------- --------------------------------------- -- ------ -------- -- -- ----------- --- ---------- -- ------ ------ --- -- -展开代码
Tabs 组件接受 defaultTab 和 children 两个属性，其中 defaultTab 表示初始选中的 Tab 标签，children 是一组 Tab 组件。
每个 Tab 组件渲染成 HTML 元素，通过 title 和 id 属性标识 Tab 标签。
-- -------------------- ---- ------- -------- ----- --- ------ -------- -- - ------ - ---- -------- -------- --- ------------------- ------------------ ---------- ------ -- - -------- ----- - ------ - ----- ------------ ---- ------ ---------- --- ---------- -- --- ----- ------ ---- ------ ---------- --- ---------- -- --- ----- ------ ---- ------ ---------- --- ---------- -- --- ----- ------ ------- -- -展开代码
响应式设计
使用 Tailwind 的 @media 标记可以方便地针对不同分辨率进行样式设计。例如，为分辨率大于 768px 的情况下 Tab 导航栏的样式设置。
-- -------------------- ---- ------- -------- ------ -------- ----------- -------- -- - -- --- ------ - -- ---- ------------------- ------- ------ ---- ------------------- ----------- ------- ---------------- -------- ----------------- ----------------- -- --------------------------------- - ----------------------------- -- ------ -------- -- -- - ------- ----------------- -------------------- ---------------- --------- --- --------- ------ ---- ----------------- ---------- ---- --------------------- ---- ----------------- ------ ----------------------------- -- ------ -------- -- -- - ------- ----------------- -------------- --------- --- ----------- - --------- -------- -------- --------- - ----------- ------------- -------------------- - --------- ----------- ---- ------ ----------- -- -------------------------- - ---------------- --------- --- ------ ------ ------ ---- ----------------- --------------------------------------- -- ------ -------- -- -- ----------- --- ---------- -- ------ ------ --- -- -展开代码
其中，md:hidden 表示在分辨率大于 768px 时隐藏 border-b 块，选用下拉菜单方式展示 Tab 导航。
示例代码
完整示例代码：
-- -------------------- ---- ------- -------- ------ -------- ----------- -------- -- - ----- ----------- ------------- - --------------------------- ------ - -- ---- ------------------- ------- ------ ---- ------------------- ----------- ------- ---------------- -------- ----------------- ----------------- -- --------------------------------- - ----------------------------- -- ------ -------- -- -- - ------- ----------------- -------------------- ---------------- --------- --- --------- ------ ---- ----------------- ---------- ---- --------------------- ---- ----------------- ------ ----------------------------- -- ------ -------- -- -- - ------- ----------------- -------------- --------- --- ----------- - --------- -------- -------- --------- - ----------- ------------- -------------------- - --------- ----------- ---- ------ ----------- -- -------------------------- - ---------------- --------- --- ------ ------ ------ ---- ----------------- --------------------------------------- -- ------ -------- -- -- ----------- --- ---------- -- ------ ------ --- -- - -------- ----- --- ------ -------- -- - ------ - ---- -------- -------- --- ------------------- ------------------ ---------- ------ -- - -------- ----- - ------ - ----- ------------ ---- ------ ---------- --- ---------- -- --- ----- ------ ---- ------ ---------- --- ---------- -- --- ----- ------ ---- ------ ---------- --- ---------- -- --- ----- ------ ------- -- -展开代码
总结
本文介绍了如何使用 Tailwind 和 React 开发响应式 Tab 导航。Tailwind 在实现样式上非常方便，而 React 在构建组件时提供了良好的复用性和可维护性。通过结合两者，能够快速有效地实现大量的网页 UI 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5611bf6b2d6eab3e18d50
