组件

Tree 树形

树形列表；data-pvs-tree + 勾选/选中 JS；节点与 summary :focus-visible 焦点环。

Checkboxes & select

全站
内容
- 文档
- 回收站

<ul class="pvs-tree" data-pvs-tree data-pvs-tree-checkboxes data-pvs-tree-selectable style="max-width:16rem">
  <li class="pvs-tree__item">
    <span class="pvs-tree__label">
      <input class="pvs-tree__check" type="checkbox" /> 全站</span>
    </li>
    <li class="pvs-tree__item">
      <details open>
        <summary class="pvs-tree__label">
          <span class="pvs-tree__toggle">
          </span>
          <input class="pvs-tree__check" type="checkbox" /> 内容</summary>
          <ul>
            <li class="pvs-tree__item">
              <span class="pvs-tree__label">
                <input class="pvs-tree__check" type="checkbox" /> 文档</span>
              </li>
              <li class="pvs-tree__item pvs-tree__item--disabled">
                <span class="pvs-tree__label">
                  <input class="pvs-tree__check" type="checkbox" disabled /> 回收站</span>
                </li>
              </ul>
            </details>
          </li>
        </ul>

Compact & lines

pvs-tree--compact 缩进行高；pvs-tree--lines 显示层级引导线。

根
栏目
- 当前页

<ul class="pvs-tree pvs-tree--compact pvs-tree--lines" data-pvs-tree style="max-width:14rem">
  <li class="pvs-tree__item">
    <span class="pvs-tree__label">根</span>
  </li>
  <li class="pvs-tree__item">
    <details open>
      <summary class="pvs-tree__label">
        <span class="pvs-tree__toggle">
        </span>栏目</summary>
        <ul>
          <li class="pvs-tree__item pvs-tree__item--selected">
            <span class="pvs-tree__label">当前页</span>
          </li>
        </ul>
      </details>
    </li>
  </ul>

数据属性

类名	说明
`data-pvs-tree`	初始化树交互
`data-pvs-tree-checkboxes`	父节点勾选联动子节点
`data-pvs-tree-selectable`	点击 label 切换 --selected
`data-pvs-tree-single`	单选高亮（可选）

类名速查

类名	说明
`pvs-tree`	ul 根（需 data-pvs-tree）
`pvs-tree__label`	节点行
`pvs-tree__item--selected / --disabled`	选中 / 禁用
`pvs-tree--compact`	紧凑行高