梧桐设计语言v0.4.1

页头PageHeader

页头 = 面包屑(metachevron-right 分隔,最后一级不可点)+ 标题行(title 26 + 可选状态 pill + 右侧操作:幽灵 / 次级 / 一个主按钮)。高度随内容,底部与内容区隔 space-6 24。


  • 一页一个 title;标题是名词(「巡检工单」),不是动作(「管理巡检工单」)。
  • 主按钮最多一个,放最右;次要操作最多两个,再多收进「更多」。
  • 移动端:面包屑退化为左上返回箭头,操作收进右上「更多」,主操作去底部。

消费者提供:面包屑、标题、状态、操作。

示例

import
import { PageHeader } from "@wutong/ui";

页头

面包屑 + 名词标题 + 状态 + 右侧一个主按钮

巡检工单

8 条超期

API

属性类型默认说明
crumbs{ label, href? }[]最后一级不可点
title / statusReactNode一页一个 title;状态 pill
actionsReactNode主按钮最多一个放最右