工作区标题栏

工作区标题使导航、资源标识、上下文元数据和高价值操作在编辑器和运维控制台之间保持一致。

生产网关

ACL 配置 · 12 秒前保存

健康

安装Terminal

npm install @a3s-lab/ui@0.4.0

<header class="workspace-header">
  <div data-workspace-leading>...</div>
  <div data-workspace-identity><h1>Resource name</h1><span>Metadata</span></div>
  <div data-workspace-actions>...</div>
</header>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

用法

<header class="workspace-header">
  <div data-workspace-leading>...</div>
  <div data-workspace-identity><h1>Resource name</h1><span>Metadata</span></div>
  <div data-workspace-actions>...</div>
</header>

参数

参数	必填	目的
`data-workspace-leading`	可选	返回、菜单或资源类型控件
`data-workspace-identity`	是	可伸缩的标题与元数据区域
`data-workspace-actions`	可选	右对齐上下文操作
`data-collapse="mobile"`	可选	隐藏低于 640 像素的次要内容
`--workspace-header-height`	可选	稳定的标题栏高度，默认 `3.5rem`（56px）

状态

使用相邻的 Badge 或状态文本表示保存、验证和运行状况。不要在标头类本身中对应用程序状态进行编码。

可访问性

将一页级 <h1> 保留在标识区域内。图标按钮需要可访问的名称。可编辑的名称应在生产中使用带标签的输入； contenteditable 仅用于在预览中演示实时文本。

#工作区标题栏

#用法

#参数

#状态

#可访问性

工作区标题栏

用法

参数

状态

可访问性