前言
在进行前端开发中，有时需要使用到一些 UI 组件来辅助完成页面布局。而 Tabs 组件则是一种常用的组件，用于在用户与页面之间切换。今天，我们将介绍一个非常实用的 npm 包 @material/tabs，它可以让你快速构建 Material Design 风格的 Tabs。
安装
在使用 @material/tabs 之前，需要先安装它。可以通过以下命令进行安装：
npm install @material/tabs
使用
HTML
在 HTML 中加入以下代码，即可使用 Tabs 组件：
-- -------------------- ---- -------
---- ------------------- ---------------
---- --------------- ---------- ---------------------
----- -------------------------
----- ------------------------------- --------
-------
----- ---------------------------------
----- -------------------------------
------
---- --------------- -----------
----- -------------------------
----- ------------------------------- --------
-------
----- ---------------------------------
----- -------------------------------
------
---- --------------- -----------
----- -------------------------
----- ------------------------------- --------
-------
----- ---------------------------------
----- -------------------------------
------
------CSS
为了让 Tabs 组件能够正常显示，需要在 CSS 中加入以下代码：
-- -------------------- ---- ------- ------- -------------------------------- ------- ------------------------ ------- ------------------------------------------ -------- - ------ ----- ------- ----- ------------ ----- -------- - ----- --------------- ---------- ---------- ----- ------------ ---- ------ ------- -- -- ----- ----------- ----- ---- ----------------- -- ---- --- - ------------------------------ - ------ ------- -- -- ------ - ------------------ - --------- --------- ------- -- ------- ---- ----------------- -------- ----------- --------- ---- ----------------- -- ---- --- -------- -- - ------------------------------ ------------------ - ---------- ---------- -
JavaScript
在 JavaScript 中，需要绑定 Tabs 组件的事件：
import {MDCTabBar} from '@material/tab-bar';
const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
tabBar.listen('MDCTabBar:activated', (event) => {
console.log(`Tab ${event.detail.index} activated`);
});示例代码
下面是一份完整的示例代码，供参考：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------------- ------------
----- ---------------- --------------------------------------------------------
----- ---------------- ------------------------------------------------
----- ---------------- ------------------------------------------------------------------
----- ---------------- -------------------
-------
------
---- ------------------- ---------------
---- --------------- ---------- ---------------------
----- -------------------------
----- ------------------------------- --------
-------
----- ---------------------------------
----- -------------------------------
------
---- --------------- -----------
----- -------------------------
----- ------------------------------- --------
-------
----- ---------------------------------
----- -------------------------------
------
---- --------------- -----------
----- -------------------------
----- ------------------------------- --------
-------
----- ---------------------------------
----- -------------------------------
------
------
------- --------------
------ ----------- ---- --------------------------------------------
----- ------ - --- --------------------------------------------------
------------------------------------ ------- -- -
---------------- --------------------- ------------
---
---------
-------
-------总结
@material/tabs 是一个非常方便实用的 npm 包，它可以帮助你快速构建 Material Design 风格的 Tabs。通过本文的学习，你已经学会了如何安装、使用、以及绑定 Tabs 组件的事件。当然，还有更多更深入的内容等待你去探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe6b5cbfe1ea06108c5