Skip to main content

页面详情

单独的详情页,展示数据的信息。


页面结构

1.头部导航

主要展示当前详情页的订单状态,包含:返回按钮、订单状态。

若订单详情可查看审批状态,则点击订单状态跳转对应的审批状态页面。

2.内容显示

可根据页面需要添加不同类型的卡片,如:商品卡片、表单。

3.底部操作

当详情页需要操作时,操作按钮放置于屏幕底部。

头部导航

头部标题一般显示当前单据的状态,点击可跳转到状态/进度的页面。

当页面进行滚动时,导航标题栏置顶在头部。

基础

拓展

内容显示

模块标题

无模块标题

有模块标题

不同类型

可复制

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

可点击

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

可收缩

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

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

多行显示

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

内容分组

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

简单分组

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

模块分组

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

底部操作

不同操作数量不同的样式显示。

页面操作固定至于屏幕底部,不随页面滑动。

设计适配

左侧标签占比40%,右侧内容占比60%,超过后换行显示。

何时使用

  • 当需要展示详情,承载数据信息及操作时使用。