tabs.md
组件 · COMPONENT

标签页 Tabs

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

来源提炼层组件源Tabs.jsx源extracted.css机读components/tabs.md
点一下试试

学习进度、最近观看与收藏。

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>
  )
}
静态标记
import { Tabs } from './extracted/Tabs.jsx'

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

属性

属性取值默认说明
itemsstring[][]标签文字
valuenumber0当前下标（受控）
onChange(index) => void—切换回调
labelstring'标签页'tablist 的读屏名

铁律

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