跳到主要内容

Form Detail 表单详情

表单详情为一种标准的详情展示组件,可展示对象全部信息,用于表单详情的显示/查看状态。


结构

标题区

通常用于承载列表详情标题、星号、图标等控件。

内容区

通常用于承载内容文本、图标等控件。

紧凑型

常用于信息字段较多的场景下。

模块标题

无模块标题

有模块标题

不同类型

可复制

点击复制,复制内容信息,并显示复制成功提示语。

可点击

点击文本区域,跳转到其它页面。

可收缩

点击收起按钮,收起卡片的内容。

卡片模块过多时,用折叠面板,可展开收起分组。

多行显示

内容超过两行时,截断更多内容,通过点击展开显示截断的内容。

内容分组

当详情内容为多类,可采用分割线或卡片模块两种方式进行划分。

简单分组

当详情内容仅为一类,默认采用卡片对不同模块进行区分,清晰易读。

模块分组

模块与模块之间的信息分组。

分割线分组

常用语模块内的信息分组。

宽松型

常用于信息字段较少及需要进行表单部分字段修改的场景下。

模块标题

无模块标题

有模块标题

不同类型

可复制

点击复制,复制内容信息,并显示复制成功提示语。

可点击

点击文本区域,跳转到其它页面。

可收缩

点击收起按钮,收起卡片的内容。

卡片模块过多时,用折叠面板,可展开收起分组。

多行显示

内容超过两行时,截断更多内容,通过点击展开显示截断的内容。

内容分组

当详情内容为多类,可采用分割线或卡片模块两种方式进行划分。

简单分组

当详情内容仅为一类,默认采用卡片对不同模块进行区分,清晰易读。

模块分组

模块与模块之间的信息分组。

分割线分组

常用语模块内的信息分组。

设计指南

布局范围待确认

右对齐表单详情

适用于带有数字的列表,右对齐方便对大小进行比较。一般数字保留两位小数,支持根据业务调整小数位数。

左对齐表单详情

  • 左对齐标题区的范围控制在(容器宽度-24-122)20% 到(容器宽度-24-122)30% 之间。
  • 支持标题换行显示。