组件

List 列表

无序/有序、数字、色块条目、行内与分隔线变体。

默认

项目一
项目二
项目三

<ul class="pvs-list">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

有序与数字

第一步
第二步
第三步

附录 A
附录 B

<ol class="pvs-list pvs-list--ordered">
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>
<ol class="pvs-list pvs-list--roman pvs-mt-4" start="4">
  <li>附录 A</li>
  <li>附录 B</li>
</ol>

无样式与行内

无符号 A
无符号 B

行内甲
行内乙

<ul class="pvs-list pvs-list--unstyled">
  <li>无符号 A</li>
  <li>无符号 B</li>
</ul>
<ul class="pvs-list pvs-list--inline pvs-mt-4">
  <li>行内甲</li>
  <li>行内乙</li>
</ul>

色块与符号

色块左边线、语义色、彩色项目符号。

主色条 · 当前
成功态
警告态
危险态

主色圆点
第二项

斑马纹 A
斑马纹 B
斑马纹 C

<ul class="pvs-list pvs-list--tile" style="max-width:14rem">
  <li class="pvs-list__item--primary">主色条 · 当前</li>
  <li class="pvs-list__item--success">成功态</li>
  <li class="pvs-list__item--warning">警告态</li>
  <li class="pvs-list__item--danger">危险态</li>
</ul>
<ul class="pvs-list pvs-list--marker-primary pvs-mt-4">
  <li>主色圆点</li>
  <li>第二项</li>
</ul>
<ul class="pvs-list pvs-list--striped pvs-mt-4" style="max-width:14rem">
  <li>斑马纹 A</li>
  <li>斑马纹 B</li>
  <li>斑马纹 C</li>
</ul>

分隔与状态

当前项
普通项
弱化项

<ul class="pvs-list pvs-list--divider" style="max-width:12rem">
  <li class="pvs-list__item--active">当前项</li>
  <li>普通项</li>
  <li class="pvs-list__item--muted">弱化项</li>
</ul>

List group

pvs-list-group 可点击条目组；链接/按钮 :focus-visible 焦点环。

当前套餐
专业版
企业版（即将）

<ul class="pvs-list-group" style="max-width:16rem">
  <li>
    <a class="pvs-list-group__item pvs-list-group__item--active" href="#">当前套餐</a>
  </li>
  <li>
    <a class="pvs-list-group__item" href="#">专业版</a>
  </li>
  <li>
    <span class="pvs-list-group__item pvs-list-group__item--disabled">企业版（即将）</span>
  </li>
</ul>

类名速查

类名	说明
`pvs-list`	默认无序列表
`pvs-list--ordered / --roman / --alpha`	有序 / 罗马 / 字母
`pvs-list--unstyled`	无项目符号
`pvs-list--inline`	行内排列
`pvs-list--tile + __item--*`	色块左边线条目
`pvs-list--marker-primary`	彩色 ::marker
`pvs-list--striped`	斑马纹行
`pvs-list--divider`	项间分隔线
`pvs-list__item--active / --muted`	当前 / 弱化
`pvs-list-group / __item`	可点击条目组
`pvs-list-group__item--active / --disabled`	选中 / 禁用