01 引言
在企业系统中,对关键信息的快速复制是一项常见需求。传统的实现方式通常涉及点击复制按钮,将内容复制到剪贴板,并显示“复制成功”的提示,这一系列操作往往需要开发者花费大量时间手动编码。然而,通过 Typography 排版组件,只需简单配置“copyable”属性,即可在几秒钟内实现这一高效且一致的交互体验。
此外,对于长文本省略、全部展开、文本高亮等常见需求,Typography 组件同样提供属性配置,一键实现,进一步简化开发,提高效率。这些特性不仅减少了编码工作量,还有助于保持用户界面的整洁和一致性,为用户提供了更加流畅和直观的体验。
02 为什么使用 Typography?
Typography 排版组件通过封装文本排版常用需求,快速实现多样化的文本样式和交互,显著提升开发效率并统一用户体验。
-
一键配置复制、省略等操作
支持一键配置:复制、长文本省略、代码域、加粗、斜体、下划线、删除线、高亮标记等,满足不同内容展示需求。
-
便捷使用,样式跟随主题
通过Typography.Text,Typography.Title, Typography.Paragraph,Typography.Link等组件,灵活应用跟随主题的文本组件。
-
与众不同的优势特性
DS 数据源集成: 与 Choerodon UI DataSet 的无缝集成,简化数据关联和内容动态展示,极大提效。
集成与扩展性: 提供全面的API支持,结合表单属性可实现自定义组件集成表单属性展示,例:标签必输、帮助提示等。
增强内容可访问性: 支持多种文本操作,如复制、多行省略控制,使得内容更加易于访问。
03 提效场景
个性化界面&表单下展示
对比传统开发,Typography 可快速配置文本样式,并结合 DS 关联数据,告别繁琐的样式编码与赋值管理,大大提升开发效率。
Typography 支持两种使用方式:
1、基本使用:
基本使用场景下,排版组件具备极强的灵活性,可使用在任意界面中,搭配各子组件可实现如文章/博客/日志等内容个性化展示界面。
2、关联 C7N-UI DataSet 使用
组件使用关联 DS,简化数据管理和内容同步;可放置于 Form 下作为表单子组件之一,也可独立关联 DS 使用。
例: 消息中心采用排版组件 Title、 Text,高效处理文本展示,省去大量样式编码。
自定义组件集成与扩展使用
Typography 组件的集成与扩展性,不仅体现在其能够直接关联 DS 在表单组件中使用,还可实现自定义组件集成表单属性展示。
例:附件上传组件不属于表单子组件,通常在独立场景下使用。但企业场景复杂,也需要在表单下控制校验上传、展示标签的需求场景。
增强内容可访问性场景
在企业系统中需要提供易于阅读和操作的文本界面,并支持快速复制和引用,提升客户服务效率。Typography 组件可一键配置如下功能,既开发提效,又简化用户操作流程。
-
一键复制 / 按钮自定义
-
灵活的文本省略
1、单行省略
2、自定义多行或中间展示省略,且可个性化添加省略后缀。(例:点击“more”展开更多)
3、自定义省略提示内容
例2:配置 ellipsis={{ rows: 3 }} 在卡片中对内容进行多行文本省略。
联系我们
我们将持续优化 Typography 排版组件功能,优化客户体验。如果您有更好的想法和建议,欢迎您积极反馈给我们。