01 引言

Tabs 组件通过提供平级区域，将大块内容进行有效的收纳和展现，从而保持界面整洁。但在企业应用的快速发展中，这样传统的页签组件已无法满足我们对界面布局和个性化展示的追求。Choerodon UI Tabs 组件通过支持多级分组、个性化配置、柔性布局与可拖拽等特性功能，重新定义了页签组件的边界，为用户带来前所未有的体验。

02 功能特性

/ 解锁个性化力量 /

传统页签组件往往限制了用户的自定义能力，页签顺序固定、标题不能修改。而 Choerodon UI Tabs 组件赋予用户控制页签顺序、重命名、是否展示页签数据等个性化设置的能力，让每个用户的界面都成为他们个性的延伸。

个性化设置

用户可通过鼠标悬浮页签区域，点击齿轮图标，在右侧弹出抽屉查看 Tabs 个性化相关配置。

1、设为默认

个性化设置，快捷访问。 支持用户根据个人习惯或工作需求，设置默认展示的标签页，在下次打开该界面时将直接进入该页签，极大地提升了浏览效率和用户体验。

2、显示数量

数据量概览，个性化展示。用户可以自主选择并展示与页签关联的数据源的数据量标记。这一功能使用户能够根据个人需求，自定义页面上显示的数据量信息，从而快速获取关键数据的概览。

3、重新命名

页签重命名，一目了然。 用户可以自由地对各个页签进行重命名，以符合个人喜好或实际内容。通过自定义页签名称，用户可以更清晰地标识和区分不同的页面功能或内容类别，从而快速找到所需信息。

4、 拖拽排序

轻松整理，拖拽自定义。 用户可以通过简单的拖拽操作来排序页签，从而根据实际需求或个人喜好自定义页签的展示顺序。这种直观的操作方式使用户能够轻松地调整和组织页面布局，确保最常用的页签或最重要的信息位于最便捷的位置。

个性化存储

通过组件库的全局配置，以上用户个性化配置数据可进行自定义存储，支持数据持久化。

1、前端缓存配置

根据项目需求选择前端缓存方式（例如：localStorage），对用户个性化数据进行前端缓存和配置持久化。这样可以避免仅配置后端接口存储时造成的多次查询等不必要的资源浪费。

2、 后端接口配置

与后端接口协作，妥善存储用户个性化数据，以确保用户跨场景使用。并保障了配置信息的可靠性和可恢复性。

/ 数据源的智能绑定 /

传统页签组件通常与数据源脱节，展示内容与页签的关联薄弱。而 Choerodon UI Tabs 通过与数据源 DataSet 的绑定，实现了校验提示及定位，确保用户在任何时候都能获取到最准确、最及时的信息。

触发页签下表单校验，

未通过校验，可限制点击跳转其他页签

多页签表单提交，

自动定位到校验失败的页签，并聚焦到对应表单组件

官网关联数据源示例：

• 示例1
• 示例2

/ 灵活的分组展示 /

传统页签组件往往无法有效组织大量信息，Choerodon UI Tabs 的分组功能，让不同类别的 Tabs 清晰展示，无论是在容器顶部还是内部，都能保持界面的整洁和有序。

/ 柔性布局与拖拽功能 /

传统页签组件在布局上往往缺乏灵活性，Choerodon UI Tabs 的柔性布局和拖拽功能，让标签可以根据用户的需求自由调整，提供操作自由度。

• 当 Tabs 组件设置固定高度或使用flex=1时，内部标签头部固定，内容区域柔性并可滚动，适应不同屏幕尺寸。

• 利用 renderTabBar 属性和 dnd-kit ，实现页签的直接可拖拽排序功能，增加用户操作的灵活度。

03 场景案例

企业系统重要会议、文件管理界面优化

案例背景

某企业对重点会议的文件管理有特别查看需求。有效的会议管理和文件组织是提高工作效率和保障信息流通的关键。然而，企业系统面临着以下挑战：

• 会议信息分散，难以集中管理和实时更新。
• 文件分类不明确，检索效率低下。

解决方案

Choerodon UI Tabs 组件提供了一套全面的解决方案

1、信息集中管理

通过 Tabs 组件，将重点会议、文件信息集中展示，实现信息的实时更新和同步。

2、重点会议与文件分组展示

利用 Tabs 的分组功能，对重点会议与重点文件进行清晰分类，并通过柔性布局优化浏览体验。

3、个性化用户体验

允许用户根据个人喜好调整 Tabs 组件属性，如页签顺序、默认进入页签等。

应用效果

实施 Choerodon UI Tabs 组件后，企业系统界面优化取得了以下显著效果。用户能够快速查看、安排和调整重点会议。直接查看重点文件，并能快速进入“由我发起”的文件页签，免去检索，界面直观，提高了工作效率。

联系我们

以上就是 Choerodon UI Tabs 组件的基本介绍，如果您有更好的想法和建议，欢迎积极反馈给我们。欢迎试用，我们诚挚的邀请您和我们一起共建 Choerodon UI，期待您的 Issue！

• github 地址

• 官网组件地址