在前端开发中，标签页（tabs）是常用的组件之一。而 tabbr-styled-default 是一个基于 React 的 npm 包，可以快捷地帮助你实现一个风格简约、易于使用的标签页。
本文将详细介绍使用 tabbr-styled-default 的方法，并提供示例代码，帮助你快速上手。
安装
使用 npm 安装 tabbr-styled-default：
npm install tabbr-styled-default
基础用法
在你的 React 组件中引入和使用 tabbr-styled-default：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --- ---- -----------------------
-------- ----- -
----- -------- ---------- - -----------------
----- ---- - -
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
--
------ ---- ----------- --------------- --------------------- ---
-
------ ------- ----上述代码中，我们定义了三个标签页，并使用 useState 来管理当前激活的标签页。将这些信息传递给 Tab，并通过 setActive 传递一个回调函数，以便在用户点击标签页时更新激活的标签页。
API 介绍
Tab: 组件的主体组件，包含以下 props：tabs: 标签页数组，每个标签页对象包含id、label和content属性。active: 当前激活的标签页的id。setActive: 设置当前激活标签页的回调函数。
TabHeader: 标签页头部组件，用于渲染标签页的标签。label: 标签页的标签。active: 当前标签页是否处于激活状态。onClick: 在标签页被点击时触发的回调函数。
TabContent: 标签页内容组件，用于渲染标签页的内容。content: 标签页的内容。active: 当前标签页是否处于激活状态。
进阶用法
tabbr-styled-default 还提供了一些额外的功能，用于实现更高级和个性化的标签页。
动态添加和删除标签页
要动态添加和删除标签页，可以使用 useState 和 useCallback 来管理标签页数组，并使用 setTabs 更新标签页数组。同时，需要将 setActive 作为 useCallback 的依赖项，以确保回调函数的稳定性。
-- -------------------- ---- -------
------ - ------------ -------- - ---- --------
------ --- ---- -----------------------
-------- ----- -
----- -------- ---------- - -----------------
----- ------ -------- - ----------
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
---
----- ------ - -------------- -- -
----- ------ - -
--- ----------------- - ----
------ ---- ------------- - ----
-------- ------------ --- --- ------------ - ---------
--
----------------- ---------
---------------------
-- ------ ---------- ----------
----- --------- - ---------------- -- -
----- ------------ - ----------------- -- ------ --- ----
----------------------
------------------------------------------ - -------
-- ------ ---------- ----------
------ -
--
------- -------------------- ------------
----
-----------
---------------
---------------------
--------------------
--
---
--
-
------ ------- ----上述代码中，我们定义了一个 addTab 和 removeTab 函数，并将它们作为回调函数传递给 Tab。点击 “Add Tab” 按钮会新建一个标签页，点击标签页的 “X” 按钮会删除对应标签页。
自定义标签页样式
tabbr-styled-default 默认提供了简约风格的标签页样式，但如果你希望使用自定义的样式，也可以轻松地实现。
首先，你可以通过在 TabHeader 中使用 style prop 来给头部组件添加样式。例如，要给标签页添加下划线：
-- -------------------- ---- -------
------ ---- - --------- - ---- -----------------------
-------- -------------- ------ ------- ------- -- -
----- ----- - -
------------- ------ - ---- ----- -------- - -------
-------- -- ------
------- ----------
--
------ -
---------- ------------- ------------- --------------- ----------------- --
--
-
-------- ----- -
----- -------- ---------- - -----------------
----- ---- - -
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
- --- ------- ------ ---- --- -------- ------------ --- --- ------- --
--
------ -
----
-----------
---------------
---------------------
---------------------------
--
--
-
------ ------- ----上述代码中，我们定义了一个 CustomHeader 组件，并在其中添加了下划线样式。最后，将该组件传递给 Tab 的 customHeader prop 即可。
自定义标签页内容
如果需要自定义标签页的内容，可以使用 TabContent 组件。
-- -------------------- ---- -------
------ - ------------ -------- - ---- --------
------ ---- - ---------- - ---- -----------------------
-------- --------------- -------- ------ -- -
-- --------- ------ -----
------ -
------------
---------------------------------
--------------------------- ---------
-------------
--
-
-------- ----- -
----- -------- ---------- - -----------------
----- ------ -------- - ----------
-
--- -------
------ ---- ---
-------- --------- ---------
--
-
--- -------
------ ---- ---
-------- --------- ---------
--
-
--- -------
------ ---- ---
-------- --------- ---------
--
---
------ -
----
-----------
---------------
---------------------
-----------------------------
--
--
-
------ ------- ----上述代码中，我们定义了一个 CustomContent 组件，并在其中添加了标题和详细内容。最后，将该组件传递给 Tab 的 customContent prop 即可。
结语
通过本文的介绍，我们了解了 npm 包 tabbr-styled-default 的基础用法和进阶用法，可以轻松地实现一个简约风格、易于使用的标签页。同时，本文也介绍了如何动态添加和删除标签页、如何自定义标签页样式和内容，包含了一些在实际开发中可能会用到的场景。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cd881e8991b448da76d