📑 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-tab id="tab1" title="Tab1">
    <p>这是标签页 1 的内容。</p>
  </d-tab>
  <d-tab id="tab2" title="Tab2">
    <p>这是标签页 2 的内容。</p>
  </d-tab>
  <d-tab id="tab3" title="Tab3">
    <p>这是标签页 3 的内容。</p>
  </d-tab>
</d-tabs>

关键属性说明：

• <d-tabs> 容器：
  • [(activeTab)]：双向绑定，用于设置或获取当前激活标签页的 id。
  • (activeTabChange)：当激活的标签页发生变化时触发的事件。
  • [type]：定义标签页的视觉样式类型，默认为 ‘tabs‘。
• <d-tab> 子项：
  • id：标签页的唯一标识，必须设置且不可重复。
  • title：标签页标题栏显示的文字。

在组件类中定义：

export class YourComponent {
  activeTabId = ‘tab1‘; // 默认激活第一个标签页

  onTabChange(id: string) {
    console.log(‘切换到标签页：‘, id);
    // 可以在此处执行与标签页切换相关的逻辑，如加载数据
  }
}

2. 丰富的标签页类型

DevUI 提供了多种视觉样式 (type) 以适应不同的设计场景。

类型 (type)	特点描述	适用场景
tabs	默认样式，经典卡片式标签页。	通用场景，内容分组。
pills	胶囊状标签页，无边框背景。	导航感更强的侧边栏或筛选。
options	类似单选按钮组样式，常配合固定宽度使用。	平级选项选择，如视图切换。
slider	带底部滑动指示条的简约样式。	需要突出选中状态的导航。
wrapped	标签页被包裹在容器内，视觉更紧凑。	标签较多或空间受限时。

代码示例 (Pills类型)：

<d-tabs type="pills" [(activeTab)]="activeTabId">
  <d-tab *ngFor="let item of tabList" [id]="item.id" [title]="item.title"></d-tab>
</d-tabs>

3. 尺寸控制

通过 size 属性可以控制标签页标题的大小，提供了四种预设尺寸。

<!-- 四种尺寸示例 -->
<d-tabs size="xs" [(activeTab)]="activeTabId">...</d-tabs> <!-- 超小 -->
<d-tabs size="sm" [(activeTab)]="activeTabId">...</d-tabs> <!-- 小 -->
<d-tabs size="md" [(activeTab)]="activeTabId">...</d-tabs> <!-- 中 (默认) -->
<d-tabs size="lg" [(activeTab)]="activeTabId">...</d-tabs> <!-- 大 -->

4. 高级与交互功能

4.1 禁用与拦截切换

• 禁用单个标签页：在 <d-tab> 上设置 [disabled]=“true”，用户将无法切换到该页。
• 拦截切换逻辑：通过 <d-tabs> 的 [beforeChange] 属性传入一个函数，可以在切换发生前进行拦截（例如，表单未保存时提示用户）。

<d-tabs [(activeTab)]="activeTabId" [beforeChange]="beforeTabChange">
  <d-tab id="tab1" title="Tab1" [disabled]="true">内容1</d-tab>
  <d-tab id="tab2" title="Tab2">内容2</d-tab>
</d-tabs>

export class YourComponent {
  // 该函数返回 boolean 或 Promise<boolean>
  beforeTabChange = (id: string): boolean => {
    if (/* 某些条件，如表单未保存 */) {
      return confirm(‘当前内容未保存，确定要离开吗？‘);
    }
    return true; // 返回 true 允许切换，false 阻止切换
  };
}

4.2 动态添加与删除标签页

此功能非常适合构建可动态管理的界面（如浏览器标签）。

<d-tabs
    type="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>

export class YourComponent {
  dynamicTabList = [...]; // 用于渲染标签页的数组
  activeTabId: string;

  onTabListChange(event: any) {
    // event.type 可能是 ‘add‘ 或 ‘delete‘
    // event.id 是相关标签页的 id
    if (event.type === ‘add‘) {
      // 处理添加新标签页的逻辑
    } else if (event.type === ‘delete‘) {
      // 处理删除标签页的逻辑，从 dynamicTabList 中移除对应项
    }
  }
}

4.3 自定义标题模板

当简单的 title 属性不能满足需求时（例如需要在标题中加入图标），可以使用 dTabTitle 指令定义模板。

<d-tabs [(activeTab)]="activeTabId">
  <d-tab *ngFor="let item of tabItems" [id]="item.id">
    <!-- 自定义标题模板 -->
    <ng-template dTabTitle>
      <i class="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-tabs
    type="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 组件功能完善且灵活。在使用时，建议：

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