📑 DevUI Tabs 页签组件使用详解
Tabs（页签）组件通过将关联的内容分组到不同的标签页中，帮助用户在不离开当前页面的前提下，高效地浏览和切换信息。DevUI 的 Tabs 组件提供了丰富的样式和强大的交互功能。本组件基于 Angular ^18.0.0 版本，用于在单页面内组织并切换不同内容区域，是构建清晰界面结构的核心组件。
1. 核心结构与基本用法
一个基本的 Tabs 由外层的<d-tabs>容器和若干个内嵌的<d-tab>子组件构成。
<d-tabs[type]="'tabs'"[(activeTab)]="activeTabId"(activeTabChange)="onTabChange($event)"><d-tabid="tab1"title="Tab1"><p>这是标签页 1 的内容。</p></d-tab><d-tabid="tab2"title="Tab2"><p>这是标签页 2 的内容。</p></d-tab><d-tabid="tab3"title="Tab3"><p>这是标签页 3 的内容。</p></d-tab></d-tabs>关键属性说明：
<d-tabs>容器：[(activeTab)]：双向绑定，用于设置或获取当前激活标签页的id。(activeTabChange)：当激活的标签页发生变化时触发的事件。[type]：定义标签页的视觉样式类型，默认为‘tabs‘。
<d-tab>子项：id：标签页的唯一标识，必须设置且不可重复。title：标签页标题栏显示的文字。
在组件类中定义：
exportclassYourComponent{activeTabId=‘tab1‘;// 默认激活第一个标签页onTabChange(id:string){console.log(‘切换到标签页：‘,id);// 可以在此处执行与标签页切换相关的逻辑，如加载数据}}2. 丰富的标签页类型
DevUI 提供了多种视觉样式 (type) 以适应不同的设计场景。
类型 (type) | 特点描述 | 适用场景 |
|---|---|---|
tabs | 默认样式，经典卡片式标签页。 | 通用场景，内容分组。 |
pills | 胶囊状标签页，无边框背景。 | 导航感更强的侧边栏或筛选。 |
options | 类似单选按钮组样式，常配合固定宽度使用。 | 平级选项选择，如视图切换。 |
slider | 带底部滑动指示条的简约样式。 | 需要突出选中状态的导航。 |
wrapped | 标签页被包裹在容器内，视觉更紧凑。 | 标签较多或空间受限时。 |
代码示例 (Pills类型)：
<d-tabstype="pills"[(activeTab)]="activeTabId"><d-tab*ngFor="let item of tabList"[id]="item.id"[title]="item.title"></d-tab></d-tabs>3. 尺寸控制
通过size属性可以控制标签页标题的大小，提供了四种预设尺寸。
<!-- 四种尺寸示例 --><d-tabssize="xs"[(activeTab)]="activeTabId">...</d-tabs><!-- 超小 --><d-tabssize="sm"[(activeTab)]="activeTabId">...</d-tabs><!-- 小 --><d-tabssize="md"[(activeTab)]="activeTabId">...</d-tabs><!-- 中 (默认) --><d-tabssize="lg"[(activeTab)]="activeTabId">...</d-tabs><!-- 大 -->4. 高级与交互功能
4.1 禁用与拦截切换
- 禁用单个标签页：在
<d-tab>上设置[disabled]=“true”，用户将无法切换到该页。 - 拦截切换逻辑：通过
<d-tabs>的[beforeChange]属性传入一个函数，可以在切换发生前进行拦截（例如，表单未保存时提示用户）。
<d-tabs[(activeTab)]="activeTabId"[beforeChange]="beforeTabChange"><d-tabid="tab1"title="Tab1"[disabled]="true">内容1</d-tab><d-tabid="tab2"title="Tab2">内容2</d-tab></d-tabs>exportclassYourComponent{// 该函数返回 boolean 或 Promise<boolean>beforeTabChange=(id:string):boolean=>{if(/* 某些条件，如表单未保存 */){returnconfirm(‘当前内容未保存，确定要离开吗？‘);}returntrue;// 返回 true 允许切换，false 阻止切换};}4.2 动态添加与删除标签页
此功能非常适合构建可动态管理的界面（如浏览器标签）。
<d-tabstype="tabs"[addable]="true"[closeable]="true"[(activeTab)]="activeTabId"(addOrDeleteTabChange)="onTabListChange($event)"><d-tab*ngFor="let item of dynamicTabList"[id]="item.id"[title]="item.title"></d-tab></d-tabs>exportclassYourComponent{dynamicTabList=[...];// 用于渲染标签页的数组activeTabId:string;onTabListChange(event:any){// event.type 可能是 ‘add‘ 或 ‘delete‘// event.id 是相关标签页的 idif(event.type===‘add‘){// 处理添加新标签页的逻辑}elseif(event.type===‘delete‘){// 处理删除标签页的逻辑，从 dynamicTabList 中移除对应项}}}4.3 自定义标题模板
当简单的title属性不能满足需求时（例如需要在标题中加入图标），可以使用dTabTitle指令定义模板。
<d-tabs[(activeTab)]="activeTabId"><d-tab*ngFor="let item of tabItems"[id]="item.id"><!-- 自定义标题模板 --><ng-templatedTabTitle><iclass="icon {{ item.icon }}"></i><span>{{ item.title }}</span><d-badge[count]="item.count"></d-badge></ng-template><!-- 标签页内容 -->{{ item.content }}</d-tab></d-tabs>4.4 处理大数据量 (scrollMode)
当标签页数量过多，横向空间不足时，可以启用滚动模式。
<d-tabstype="wrapped"[scrollMode]="‘auto‘"<!--或true(始终启用)-->[(activeTab)]="activeTabId"><d-tab*ngFor="let item of manyTabs"[id]="item.id"[title]="item.title"></d-tab></d-tabs>5. 功能特性速查表
下表汇总了 Tabs 组件的核心属性与事件，方便您快速查阅：
| 分类 | 属性/事件 | 适用对象 | 说明与常用值 |
|---|---|---|---|
| 核心控制 | [(activeTab)] | d-tabs | 双向绑定当前激活页的id。 |
(activeTabChange) | d-tabs | 激活页改变时触发。 | |
[type] | d-tabs | 样式类型：tabs,pills,options,slider,wrapped。 | |
[size] | d-tabs | 尺寸：xs,sm,md(默认),lg。 | |
| 标签页定义 | id | d-tab | 必须，唯一标识。 |
title | d-tab | 标题文本。 | |
[disabled] | d-tab | 是否禁用该页签。 | |
dTabTitle指令 | ng-template | 用于自定义标题模板。 | |
| 交互增强 | [beforeChange] | d-tabs | 切换前的拦截函数。 |
[addable] | d-tabs | 是否显示“添加”按钮。 | |
[closeable] | d-tabs | 是否显示“关闭”按钮。 | |
(addOrDeleteTabChange) | d-tabs | 添加/删除页签时触发。 | |
[scrollMode] | d-tabs | 溢出滚动模式：true,false,‘auto‘。 | |
| 其他 | [showContent] | d-tabs | 是否显示内容区域，设为false可只做导航。 |
[reactivable] | d-tabs | 是否允许重复点击当前激活页来触发事件。 |
💡 总结与最佳实践
DevUI Tabs 组件功能完善且灵活。在使用时，建议：
- 规划结构：根据内容关联性和操作频率决定是否使用 Tabs。
- 选择样式：根据整体设计风格选择合适的
type和size。 - 善用高级功能：对动态内容使用增删功能，对需要校验的场景使用
beforeChange拦截。 - 保持响应式：在标签页可能过多时，考虑启用
scrollMode。
参考文档
MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home
