页面详情
单独的详情页,展示数据的信息。
页面结构
1.头部导航
主要展示当前详情页的订单状态,包含:返回按钮、订单状态。
若订单详情可查看审批状态,则点击订单状态跳转对应的审批状态页面。
2.内容显示
可根据页面需要添加不同类型的卡片,如:商品卡片、表单。
3.底部操作
当详情页需要操作时,操作按钮放置于屏幕底部。
头部导航
头部标题一般显示当前单据的状态,点击可跳转到状态/进度的页面。
当页面进行滚动时,导航标题栏置顶在头部。
基础
拓展
内容显示
模块标题
无模块标题
有模块标题
不同类型
可复制
点击复制,复制内容信息,并显示复制成功提示语。
可点击
点击文本区域,跳转到其它页面。
可收缩
点击收起
按钮,收起卡片的内容。
卡片模块过多时,用折叠面板,可展开收起分组。
多行显示
内容超过两行时,截断更多内容,通过点击展开
显示截断的内容。
内容分组
当详情内容为多类,可采用分割线或卡片模块两种方式进行划分。
简单分组
当详情内容仅为一类,默认采用卡片对不同模块进行区分,清晰易读。
模块分组
模块与模块之间的信息分组。
底部操作
不同操作数量不同的样式显示。
页面操作固定至于屏幕底部,不随页面滑动。
设计适配
左侧标签占比40%
,右侧内容占比60%
,超过后换行显示。
何时使用
- 当需要展示详情,承载数据信息及操作时使用。