DevUI中Tabs 页签组件使用详解

📑 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) 以适应不同的设计场景。

代码示例 (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 组件的核心属性与事件，方便您快速查阅：

💡 总结与最佳实践

DevUI Tabs 组件功能完善且灵活。在使用时，建议：

1. 规划结构：根据内容关联性和操作频率决定是否使用 Tabs。
2. 选择样式：根据整体设计风格选择合适的type和size。
3. 善用高级功能：对动态内容使用增删功能，对需要校验的场景使用beforeChange拦截。
4. 保持响应式：在标签页可能过多时，考虑启用scrollMode。

参考文档

MateChat：https://gitcode.com/DevCloudFE/MateChat

MateChat官网：https://matechat.gitcode.com

DevUI官网：https://devui.design/home