介绍
@shortcm/tabs 是一个基于 JavaScript 的前端库，用于在网页中创建多个标签页，可定制标签页样式及展示内容。它是一个轻量级且易于使用的 npm 包，对于前端开发人员来说非常方便。
安装
要在项目中使用 @shortcm/tabs，首先需要在命令行中运行以下命令安装它：
npm install @shortcm/tabs
此命令将会从 npm 包管理器中下载 @shortcm/tabs 包，并将其保存在项目的 node_modules 文件夹内。
使用
引入库 & HTML 结构
在使用 @shortcm/tabs 前，请先将库引入你的项目中：
import Tabs from '@shortcm/tabs';
接下来，在 HTML 文件中定义标签页的结构。一般来说，标签页可以使用以下 HTML 结构：
-- -------------------- ---- -------
---- -------------
--- -----------------
------ ----------------- ----------
------ ----------------- ----------
------ ----------------- ----------
-----
---- ---------------------
---- ---------- ----------------------- - ------- ---- -----------
---- ---------- ----------------------- - ------- ---- -----------
---- ---------- ----------------------- - ------- ---- -----------
------
------请确保为每个标签页定义唯一的 ID。
初始化
现在，我们可以使用 @shortcm/tabs 创建标签页了。首先，我们需要初始化 Tabs 对象：
let tabs = new Tabs('.tabs');此代码将根据 CSS 类 .tabs 获取所有标签页，并将它们转换为标签页控制器。如果你像上面一样写好了 HTML，这个代码应该就能够正常工作了。
选项
可以传递一些选项来为标签页库添加一些自定义行为，例如自定义标签的类名，滚动条样式等。这里是一些选项的示例：
-- -------------------- ---- -------
--- ---- - --- ------------- -
-------- -
---- -----------
-------- ---------------
---------- -------------
-------------- ---------------------
--
------- ----
---方法
@shortcm/tabs 有一些可以调用的方法，以便进一步定制标签页的行为。
selectTab()
此方法可用于选择标签页。它接受一个参数，即要选择的标签页的索引号，从零开始。
tabs.selectTab(2);
addTab()
此方法可以添加新的标签页。它接受两个参数，一个是标签名，另一个是标签页的内容。它还可以接受一个可选的索引值，使您可以在指定索引号之前添加新页。
tabs.addTab('Tab 4', '<p>Tab 4 content goes here.</p>');removeTab()
此方法从标签页中移除指定的标签。它接受一个参数，即要删除的标签的索引号，从零开始。
tabs.removeTab(2);
事件
标签页库提供了一些自定义事件，以便在标签页的状态更改时做出响应。
tabChange
当用户更改活动选项卡时，将触发此事件。
tabs.on('tabChange', function(e) {
console.log('Active tab: ', e.detail.index);
});完整示例
下面是一个完整的示例，演示如何使用 @shortcm/tabs 来创建自定义的标签页：
-- -------------------- ---- -------
--------- -----
------
------
-------------- - ---------------------
-------
----- -
-------- -----
--------------- -------
------- -----
------- --- ----- -----
-------------- ----
--------- -------
-
--------- -
-------- -----
---------------- -----
------- --
-------- --
----------- -----
----------- -------
-------------- --- ----- -----
--------------------------- ------
-
--------- -- -
------------- -----
-
--------- ------------- -
------------- --
-
--------- - -
-------- ------
-------- -----
---------------- -----
------ -----
-------------- --- ----- ------------
-
--------- ------- -
------ -----
-
----------- - -
------ -----
-------------- --- ----- --------
-
------------- -
-------- -----
-
------------ -
-------- -----
-
------------------- -
-------- ------
-
--------
-------
------
---- -------------
--- -----------------
------ ----------------- ----------
------ ----------------- ----------
------ ----------------- ----------
-----
---- ---------------------
---- ---------- ----------------------- - ------- ---- -----------
---- ---------- ----------------------- - ------- ---- -----------
---- ---------- ----------------------- - ------- ---- -----------
------
------
------- ---------------- --- ------------
------- --------------
------ ---- ---- ----------------
----- ---- - --- ------------- -
-------- -
---- -----------
-------- ---------------
---------- -------------
-------------- ---------------------
--
------- ----
---
------------------------------------------------------------ ---------- -
---------------- -------------- - ---- ------- -------------- - -- ------- ---- ------------
---
---------
-------
-------总结
使用 @shortcm/tabs，你可以快速构建多标签页的交互界面，无需手动编写大量的 HTML、CSS 和 JavaScript 代码。并且这个库非常灵活，您可以根据需要自定义各种设置。
在此教程中，我们介绍了该库的安装和基本用法，同时还演示了一些自定义设置和用法示例。希望它对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a230d09270238223c6