随着前端开发技术的不断发展，我们早已不需要手动编写轮播图、选项卡等常见组件了。开源社区中已经有许多高质量的组件库可以选择使用。本篇文章介绍的是 @stejnar/tabs 这个 npm 包，并提供了一份详细的使用教程。
概述
@stejnar/tabs 是一个简单易用的选项卡组件，开发者只需引用该 npm 包，即可快速搭建一个自己的选项卡界面。它提供了多种参数配置和自定义 CSS 样式的 API，可以满足大多数选项卡组件的需求。
安装
首先，我们需要在本地安装该 npm 包。使用以下 npm 命令：
npm install @stejnar/tabs --save
该命令会自动将 @stejnar/tabs 包安装到本地，并将其添加到 package.json 文件中。
使用
@stejnar/tabs 提供了多个选项卡组件的创建方式，下面是其中最简单的一种方式：
-- -------------------- ---- -------
------ ---- ---- ----------------
----- -------- - ---------------------------------------------------
----- ---- - --- ------
---------
---
-- ---------
----------------- --- -- -
-----------------------------------
---上面的代码使用 ES6 语法导入了 @stejnar/tabs 包，并创建了一个示例。
该组件需要传入一个对象，对象中包含可选择的参数。其中，elements 必须传递一个 DOM 元素数组，包含了所有需要实现选项卡效果的元素。
这里标记为 .tab-item 的元素被视为选项卡的标题，需要与 .tab-content 配对使用。例如：
<div class="tabs"> <div class="tab-item">Tab A</div> <div class="tab-item">Tab B</div> <div class="tab-content">内容 A</div> <div class="tab-content">内容 B</div> </div>
此外，还可以传入其他配置参数来定制选项卡的样式和行为。下面介绍其中几个常用的配置项。
配置项说明
1. activeIndex: number
用于控制默认的选中项。
new Tabs({
activeIndex: 1,
});2. activeClass: string = 'is-active'
选中状态的样式名。
new Tabs({
activeClass: 'active',
});3. triggerEvent: string = 'click'
控制选项卡切换事件类型。
new Tabs({
triggerEvent: 'mouseover',
});自定义样式
@stejnar/tabs 自带的样式比较简单，如果需要自定义样式，有以下几种方法：
方法一：修改参数
@stejnar/tabs 基于 CSS 的属性部分开放了自定义接口，可以通过修改传统参数来实现自定义样式。以修改选中状态的样式为例：
-- -------------------- ---- ------- --- ------ ------------ ------------------ --- -- --- -- ----- ---------------- - ------ ---- -- ---- ----- ------ ---- -- -
方法二：覆盖默认样式
通过覆盖 @stejnar/tabs 的默认样式来实现自定义样式。
.tabs .is-active {
color: red;
/* your other styles here */
}注意，覆盖默认样式可能会影响其他组件，建议慎用。
API 文档
Methods
change(index: number)
选中指定索引的选项卡。
tabs.change(3);
Events
change
选项卡切换事件，当选项卡被切换时，会触发该事件。
tabs.on('change', (e) => {
console.log(`当前选项卡索引为：${e.index}`);
});总结
@stejnar/tabs 是一个简单易用的选项卡组件，代码体积小，使用方便。通过本篇文章的介绍，你应该已经掌握了该组件的基本使用方法以及常用的自定义方式。在实际项目中使用该组件，可以提升工作效率和代码的可读性，推荐给所有前端开发者使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac3c