介绍
preact-hashtabs 是一个基于 Preact 的快速构建标签页系统的 npm 包。和传统的标签页系统不同，preact-hashtabs 通过 URL 的 hash 来控制显示的标签。同时，它还支持主题自定义。
安装
在项目目录下运行以下命令安装 preact-hashtabs：
npm install preact-hashtabs
引入
在你的项目中引入 preact-hashtabs 的方法如下：
import { HashTabs } from 'preact-hashtabs';
import 'preact-hashtabs/dist/style.css';HashTabs 是 preact-hashtabs 中用来创建标签页组件的类，style.css 中包含了 preact-hashtabs 的默认样式，需要在 HTML 中加载。
使用
基本使用
标签页的最基本形式可以只包含一个 HashTabs 组件，示例代码如下：
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - -------- - ---- ------------------
------ ---------------------------------
----- ---- - -- -- -
-----
-------------
------
--
----- -------- - -- -- -
-----
-----------------
------
--
----- --- - -- -- -
----------
---- -----------
----- --
------
---- ---------------
--------- --
------
-----------
--
----------- --- ---------------在这个例子中，我们先定义了两个组件 Home 和 Settings 分别用来生成标签对应的内容。然后通过 HashTabs 组件来创建标签页。在 HashTabs 组件内，我们用 div 标签包含了 Home 和 Settings 组件，同时给每个 div 标签设置了一个 tab 属性。这个属性对应的值将会作为标签页的标题显示出来。
高级使用
在上一个例子中，我们只是简单地创建了标签页，并没有使用 preact-hashtabs 提供的更多功能。下面将介绍一些高级用法。
外观自定义
preact-hashtabs 提供了一些默认样式，但是你可以通过传递参数来自定义标签页的样式。以下是一些可用的参数：
theme: 主题样式名称，可以自己定义tabPosition: 标签的位置，可选值为 'top' 或 'bottom'，默认值为 'top'headerClassName: header 的 class 名称tabWrapperClassName: 所有标签的外层容器的 class 名称tabClassName: 每个标签的 class 名称panelClassName: 每个面板的 class 名称
示例代码：
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - -------- - ---- ------------------
------ ---------------------------------
----- ---- - -- -- -
-----
-------------
------
--
----- -------- - -- -- -
-----
-----------------
------
--
----- --- - -- -- -
---------
---------------
--------------------
------------------------------
----------------------------
--------------------
------------------------
-
---- -----------
----- --
------
---- ---------------
--------- --
------
-----------
--
----------- --- ---------------我们通过传递参数来自定义了标签页的样式。其中 theme 参数用来定义主题样式名称，然后可以在 CSS 中自定义这个主题的样式，从而实现对标签页的外观自定义。
定制 header
preact-hashtabs 的 header 是由标签组成的，如果你要进行更多的样式定制，可以自己创建 header。以下示例代码展示了如何创建一个自定义的 header：
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - -------- - ---- ------------------
------ ---------------------------------
----- ---- - -- -- -
-----
-------------
------
--
----- -------- - -- -- -
-----
-----------------
------
--
----- -------- - -- ----- --------- ----------- -- -- -
---- ---------------------
--------------- ------ -- -
-------
---------------
----------- -- -
----------------
--
---------------------- --- ----- - -------- - ---
-
-----------
---------
---
------
--
----- --- - -- -- -
---------
-----------------
-
---- -----------
----- --
------
---- ---------------
--------- --
------
-----------
--
----------- --- ---------------我们将创建好的 MyHeader 组件传递给了 HashTabs 的 header 属性。MyHeader 组件接受 3 个参数：
tabs: 所有标签的配置，包含了标题和当前显示的状态等信息onChange: 切换标签时的回调函数，接受参数为切换后的标签索引值activeIndex: 当前显示的标签的索引值
在 MyHeader 中，我们使用两个 button 标签来表示标签，然后在点击时，调用 onChange 回调函数来切换标签。当标签为当前显示标签时，我们给它应用 active 样式类。
结束语
使用 preact-hashtabs，我们可以非常方便地实现一个标签页系统，并且通过对参数和回调函数的合理使用，能够实现对标签页的外观和功能的任意定制。当然，这只是一个示例，preact-hashtabs 提供了更多的 API，我们可以根据实际需求进行使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560a081e8991b448dedf3