组件 · 导航
页面头 PageHeader
面包屑、标题、说明、操作、tab —— 资源页、设置页的顶部。
演示
长文发布
把 Markdown 写进 X 文章。v1.8.2 · 2,410 位用户
<header class="xxd-page-header">
<ol class="xxd-breadcrumbs"><li><a href="#">插件</a></li><li aria-current="page">长文发布</li></ol>
<div class="xxd-page-header__row">
<h1 class="xxd-page-header__title">长文发布</h1>
<div class="xxd-page-header__actions"><button class="xxd-btn">打开商店页</button><button class="xxd-btn" data-variant="primary">发布新版本</button></div>
</div>
<p class="xxd-page-header__desc">把 Markdown 写进 X 文章。v1.8.2 · 2,410 位用户</p>
<div class="xxd-tabs" role="tablist" aria-label="插件" data-xxd-tabs><button role="tab" aria-selected="true">概览</button><button role="tab">版本</button><button role="tab">设置</button></div>
</header>属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-page-header xxd-page-header__row xxd-page-header__title xxd-page-header__desc xxd-page-header__actions |
键盘与读屏
- 标题是页面的 h1;面包屑和 tab 各自带语义(nav / tablist)
- 操作按钮按重要性从左到右,主操作在最后