Components · Tab
下载

组件

Tab 标签页

标签页切换；data-pvs-tabs 由 pivcss.min.js 驱动；Tab 按钮 :focus-visible 焦点环。

互斥切换：与文档演示块顶栏「预览 / 代码」相同——任意时刻只显示一个面板。点击某个 data-pvs-tab 按钮，仅与之 data-pvs-panel 值相同且带 is-active 的面板可见，其余面板隐藏（display:none）。初始页须在按钮与一个面板上同时加 is-active。

默认标签页

面板 A 内容

面板 B 内容

<div data-pvs-tabs>
  <ul class="pvs-tabs__nav">
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn is-active" data-pvs-tab="ta">概述</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="tb">API</button>
    </li>
  </ul>
  <div class="pvs-tabs__panel is-active" data-pvs-panel="ta">
    <p class="pvs-m-0">面板 A 内容</p>
  </div>
  <div class="pvs-tabs__panel" data-pvs-panel="tb">
    <p class="pvs-m-0">面板 B 内容</p>
  </div>
</div>

胶囊样式

药丸风格面板 1
面板 2
<div data-pvs-tabs class="pvs-tabs--pill">
  <ul class="pvs-tabs__nav">
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn is-active" data-pvs-tab="p1">One</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="p2">Two</button>
    </li>
  </ul>
  <div class="pvs-tabs__panel is-active" data-pvs-panel="p1">药丸风格面板 1</div>
  <div class="pvs-tabs__panel" data-pvs-panel="p2">面板 2</div>
</div>

左侧标签

pvs-tabs--start 标签在左、内容在右。

左侧 Tab · 面板 1

面板 2

<div data-pvs-tabs class="pvs-tabs--start" style="max-width:24rem">
  <ul class="pvs-tabs__nav">
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn is-active" data-pvs-tab="ls1">概览</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="ls2">设置</button>
    </li>
  </ul>
  <div class="pvs-tabs__panel is-active" data-pvs-panel="ls1">
    <p class="pvs-m-0">左侧 Tab · 面板 1</p>
  </div>
  <div class="pvs-tabs__panel" data-pvs-panel="ls2">
    <p class="pvs-m-0">面板 2</p>
  </div>
</div>

右侧标签

pvs-tabs--end 标签在右。

右侧 Tab · 内容 A

内容 B

<div data-pvs-tabs class="pvs-tabs--end" style="max-width:24rem">
  <ul class="pvs-tabs__nav">
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn is-active" data-pvs-tab="re1">A</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="re2">B</button>
    </li>
  </ul>
  <div class="pvs-tabs__panel is-active" data-pvs-panel="re1">
    <p class="pvs-m-0">右侧 Tab · 内容 A</p>
  </div>
  <div class="pvs-tabs__panel" data-pvs-panel="re2">
    <p class="pvs-m-0">内容 B</p>
  </div>
</div>

Vertical alias

pvs-tabs--vertical 与 --start 等价，文档与迁移更直观。

竖向 Tab 面板

面板 2

<div data-pvs-tabs class="pvs-tabs--vertical" style="max-width:24rem">
  <ul class="pvs-tabs__nav">
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn is-active" data-pvs-tab="v1">账户</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="v2">安全</button>
    </li>
  </ul>
  <div class="pvs-tabs__panel is-active" data-pvs-panel="v1">
    <p class="pvs-m-0">竖向 Tab 面板</p>
  </div>
  <div class="pvs-tabs__panel" data-pvs-panel="v2">
    <p class="pvs-m-0">面板 2</p>
  </div>
</div>

Tab keyboard

水平 Tab：←/→/Home/End；垂直 pvs-tabs--start/end 用 ↑/↓。JS 自动补 role 与 aria-selected。

方向键切换

面板 2

面板 3

<div data-pvs-tabs>
  <ul class="pvs-tabs__nav">
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn is-active" data-pvs-tab="kb1">Tab 1</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="kb2">Tab 2</button>
    </li>
    <li class="pvs-tabs__tab">
      <button type="button" class="pvs-tabs__btn" data-pvs-tab="kb3">Tab 3</button>
    </li>
  </ul>
  <div class="pvs-tabs__panel is-active" data-pvs-panel="kb1">
    <p class="pvs-m-0">方向键切换</p>
  </div>
  <div class="pvs-tabs__panel" data-pvs-panel="kb2">
    <p class="pvs-m-0">面板 2</p>
  </div>
  <div class="pvs-tabs__panel" data-pvs-panel="kb3">
    <p class="pvs-m-0">面板 3</p>
  </div>
</div>

结构

div[data-pvs-tabs] → ul.pvs-tabs__nav + 多个 div.pvs-tabs__panel；tab 与 panel 用相同 data-pvs-tab / data-pvs-panel 值配对；仅一个 panel 带 is-active 时显示

数据属性

类名说明
data-pvs-tabs根容器，JS 初始化
data-pvs-tab按钮上的 tab id
data-pvs-panel面板 id，与 tab 对应
Tab 键盘←→/↑↓/Home/End · roving tabindex
.is-active当前 tab 按钮与 panel

类名速查

类名说明
pvs-tabs__nav / __tab / __btn标签栏
pvs-tabs__panel内容面板
pvs-tabs--pill药丸风格
pvs-tabs--start左侧竖向标签
pvs-tabs--vertical竖向别名（同 start）
pvs-tabs--end右侧竖向标签