前言
在现代的 Web 应用中，我们常常需要通过标签页来对内容进行分类和展示。今天我们介绍一个常用的标签页组件 @jaspero/ng-tabs ，它是一个基于 Angular 的开源组件库，方便我们快速构建优雅的标签页。
安装
在使用该组件之前，我们需要先安装 @jaspero/ng-tabs 包：
npm install @jaspero/ng-tabs --save
安装完成后在项目中引入 TabsModule：
-- -------------------- ---- -------
-- -------------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------- - ---- -------------------
-----------
------------- -
------------
--
-------- -
--------------
----------
--
---------- --------------
--
------ ----- --------- - -使用
接下来我们可以在 HTML 文件中使用该组件了，示例代码如下：
-- -------------------- ---- -------
--------------
------------ ---------- ---
------- - ------------
------- -- ---- ------- --- --- -----
--------------
------------ ---------- ---
------- - ------------
------- -- ---- ------- --- --- -----
--------------
------------ ---------- ---
------- - ------------
------- -- ---- ------- --- --- -----
--------------
---------------我们可以看到，jaspero-tabs 是 Tabs 组件的外层容器，每个 jaspero-tab 都表示一个标签页，我们可以通过 label 属性来设置标签页的标签名。
输入输出属性
Jaspero Tabs 组件提供了许多有用的输入输出属性，我们来逐一介绍一下：
输入属性
[align]
- 类型：
'start' | 'center' | 'end' - 默认值：
'start' - 说明：设置标签页对齐方式。
[background]
- 类型：
string - 默认值：
'#fff' - 说明：设置标签页背景颜色。
[color]
- 类型：
string - 默认值：
'#000' - 说明：设置标签页的文字颜色。
输出属性
(init)
- 说明：当 Tabs 组件初始化完成时触发该事件。
(change)
- 说明：当标签页发生变化时触发该事件，并返回当前活动的标签页索引。
自定义样式
我们可以通过设置 CSS 属性来自定义标签页的样式。例如，我们可以通过以下样式来设定标签页文本的背景色和文字颜色：
jaspero-tabs {
--jaspero-tabs-tab-text-color: #fff;
--jaspero-tabs-tab-background-color: #1976d2;
--jaspero-tabs-tab-border-radius: 5px;
}此外，我们还可以通过设置 [background] 输入属性来直接修改背景色，通过 [color] 输入属性来直接修改文字颜色。
总结
在本文中，我们介绍了一个非常实用的标签页组件库 @jaspero/ng-tabs，它能够帮助我们快速构建优雅的标签页。我们详细介绍了该组件的安装和使用方法，并通过示例代码演示了如何设置组件的输入输出属性以及自定义样式。相信通过阅读本文后，大家已经掌握了该组件的使用方法，希望能够在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5b81e8991b448e5e36