---
title: 标签页 Tabs
url: https://ui.zhaozimin.com/components/tabs/
markdown: https://ui.zhaozimin.com/components/tabs.md
group: 组件
origin: 提炼层组件（src/extracted），本仓库是唯一源头
source:
  - src/extracted/Tabs.jsx  # https://ui.zhaozimin.com/src/extracted/Tabs.jsx
  - src/extracted/extracted.css  # https://ui.zhaozimin.com/src/extracted/extracted.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 标签页 Tabs

> 下划线标签页。当前项墨色 600 加 2px 朱色下划线，其余灰字 450。那条朱线就是这一屏的「你在这里」。

### 样张 · 点一下试试

React：

```jsx
import { useState } from 'react'
import { Tabs } from './extracted/Tabs.jsx'

const ITEMS = ['概览', '课程', '设置']
const BODY = ['学习进度、最近观看与收藏。', '全部课程系列与课节。', '账户、通知与偏好。']

export default function TabsDemo() {
  const [tab, setTab] = useState(0)
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <Tabs items={ITEMS} value={tab} onChange={setTab} />
      <p role="tabpanel" style={{ margin: 0, padding: '16px 0 0', fontSize: 13, lineHeight: '20px', color: '#72726E' }}>{BODY[tab]}</p>
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="width: 100%; max-width: 480px">
  <div
    role="tablist"
    aria-label="标签页"
    style="display: flex; gap: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.09)"
  >
    <button
      type="button"
      role="tab"
      aria-selected="true"
      class="zzm-tab"
      style="
        padding: 8px 2px 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: #161616;
        border-bottom: 2px solid var(--zzm-accent, #a6402f);
        margin-bottom: -1px;
      "
    >
      概览
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="zzm-tab"
      style="
        padding: 8px 2px 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 450;
        color: #8b8b85;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
      "
    >
      课程
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="zzm-tab"
      style="
        padding: 8px 2px 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 450;
        color: #8b8b85;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
      "
    >
      设置
    </button>
  </div>
  <p
    role="tabpanel"
    style="margin: 0; padding: 16px 0 0; font-size: 13px; line-height: 20px; color: #72726e"
  >
    学习进度、最近观看与收藏。
  </p>
</div>
```

### 样张 · 静态标记

React：

```jsx
import { Tabs } from './extracted/Tabs.jsx'

export function Static() {
  return (
    <div style={{ width: 360 }}>
      <Tabs items={['概览', '课程', '设置']} value={0} />
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="width: 360px">
  <div
    role="tablist"
    aria-label="标签页"
    style="display: flex; gap: 24px; border-bottom: 1px solid rgba(0, 0, 0, 0.09)"
  >
    <button
      type="button"
      role="tab"
      aria-selected="true"
      class="zzm-tab"
      style="
        padding: 8px 2px 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        color: #161616;
        border-bottom: 2px solid var(--zzm-accent, #a6402f);
        margin-bottom: -1px;
      "
    >
      概览
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="zzm-tab"
      style="
        padding: 8px 2px 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 450;
        color: #8b8b85;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
      "
    >
      课程
    </button>
    <button
      type="button"
      role="tab"
      aria-selected="false"
      class="zzm-tab"
      style="
        padding: 8px 2px 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        font-size: 13px;
        font-weight: 450;
        color: #8b8b85;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
      "
    >
      设置
    </button>
  </div>
</div>
```

## 属性

| 属性 | 取值 | 默认 | 说明 |
|---|---|---|---|
| `items` | string[] | [] | 标签文字 |
| `value` | number | 0 | 当前下标（受控） |
| `onChange` | (index) => void | — | 切换回调 |
| `label` | string | '标签页' | tablist 的读屏名 |

## 铁律

- ✓ 要：同屏用了朱色下划线，就不再用第二处朱色做装饰
- ✗ 不要：做成胶囊分段控件——需要分段时用 sm 按钮组（当前项墨键）

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* tokens.css · 用到的令牌 */
:root {
  --zzm-accent: #A6402F;
}

/* extracted.css */

.zzm-v4 .zzm-tab { transition: color .16s ease; }

.zzm-v4 .zzm-tab:hover { color: #161616 !important; }

.zzm-v4 .zzm-switch:focus-visible,
.zzm-v4 .zzm-check:focus-visible,
.zzm-v4 .zzm-tab:focus-visible,
.zzm-v4 .zzm-page:focus-visible,
.zzm-v4 .zzm-sort:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(166, 64, 47, .2);
}
```

---

上一页：[面包屑](https://ui.zhaozimin.com/components/breadcrumb.md) · 下一页：[分页](https://ui.zhaozimin.com/components/pagination.md) · 全站目录：https://ui.zhaozimin.com/llms.txt