标签页

下划线型用于页面主内容分组，激活态使用 cdx-700 2px 下划线；卡片型用于次级切换。禁用态降低透明度且不响应点击。

返回组件库
17 · TABS · 标签页（§14.10）
Line 型（下划线激活态）
当前显示：全部订单内容区域
Card 型（卡片背景激活态）
带图标 + 可关闭
<section id="tabs" class="section">
    <div class="section-title">17 · TABS · 标签页（§14.10）</div>

    <div class="demo-sub">Line 型（下划线激活态）</div>
    <div class="demo-box">
      <div class="demo-tabs-line" data-demo-tabs>
        <button class="demo-tab is-active" type="button">全部订单</button>
        <button class="demo-tab" type="button">待处理</button>
        <button class="demo-tab" type="button">已完成</button>
        <button class="demo-tab is-disabled" type="button" disabled>已禁用</button>
      </div>
      <div class="demo-tab-panel">当前显示：全部订单内容区域</div>
    </div>

    <div class="demo-sub">Card 型（卡片背景激活态）</div>
    <div class="demo-box">
      <div class="demo-tabs-card" data-demo-tabs>
        <button class="demo-tab is-active" type="button">概览</button>
        <button class="demo-tab" type="button">详情</button>
        <button class="demo-tab" type="button">日志</button>
      </div>
    </div>

    <div class="demo-sub">带图标 + 可关闭</div>
    <div class="demo-box">
      <div class="demo-tabs-line" data-demo-tabs>
        <button class="demo-tab is-active" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
          首页
        </button>
        <button class="demo-tab" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          用户管理
          <span class="demo-tab-close" role="button" aria-label="关闭标签">&times;</span>
        </button>
        <button class="demo-tab" type="button">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 20h9M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          编辑器
          <span class="demo-tab-close" role="button" aria-label="关闭标签">&times;</span>
        </button>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。