在前端开发中，我们经常会用到样式类似于选项卡的组件，而 @web-atrio/tabs-responsive 就是一个非常不错的 npm 包，可以帮助我们快速地实现这样的组件。
1. 安装
可以通过以下命令安装该 npm 包：
npm install @web-atrio/tabs-responsive
2. 使用
2.1. 引入
在使用前，我们需要先将该包引入到项目中：
import '@web-atrio/tabs-responsive' import '@web-atrio/tabs-responsive/dist/tabs-responsive.css'
2.2. HTML
在 HTML 中，我们需要定义一个 <div> 并添加相应的类名，以及一些子元素（选项卡）：
-- -------------------- ---- -------
---- ----------- -----------
---- ------------------
----
--- -------------------- ------------ ----------
------ ------------ ----------
------ ------------ ----------
------ ------------ ----------
-----
------
---- ---------------------
---- ---------------- -----------
------- - ------------
-------- ----- ----- --- ---- ----------- ---------------
------
---- ------------------
------- - ------------
-------- ----- ----- --- ---- ----------- ---------------
------
---- ------------------
------- - ------------
-------- ----- ----- --- ---- ----------- ---------------
------
---- ------------------
------- - ------------
-------- ----- ----- --- ---- ----------- ---------------
------
------
------2.3. CSS
除了在引入时需要加载该包的 CSS 文件外，我们还需要给一些元素设置一些基础样式。以下是这个包所需的一些基础样式：
-- -------------------- ---- ------- ----- - -------- ----- --------------- ------- ------- ----- - ----- ---------- - -------- ----- ---------------- ------- - ----- ---------- -- - -------- ----- ----------- ----- ------- -- -------- -- - ----- ---------- -- -- - ------- - ----- - ----- ---------- -- ------------ - - ------ ----- ------- -------- ---------------- ----- - ----- ---------- -- -- - - ------ ----- ------- -------- ---------------- ----- - ----- ------------- - -------- ----- --------------- ------- ---------- -- ----------- ----- - ---------- - -------- ----- ----------- ----- - -------------------- - -------- ------ -
2.4. JavaScript
在 JavaScript 中，我们需要调用该包的 init() 函数来启动该组件：
window.onload = function() {
const tabs = document.querySelector('.tabs')
if (tabs) {
tabs.init()
}
}2.5. 示例
通过以上步骤即可实现一个基础的选项卡组件。以下是运行时的示例效果：
3. 总结
通过使用 @web-atrio/tabs-responsive 这个 npm 包，我们可以轻松地实现一个基础的选项卡组件，并且通过修改 CSS 样式和 JavaScript 代码，可以实现更加复杂的效果。同时，在实际项目开发中，使用这样的 npm 包能够提高我们的开发效率，并且降低出错的概率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8481e8991b448d91b2