Components · List

组件

List 列表

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

默认

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

有序与数字

  1. 第一步
  2. 第二步
  3. 第三步
  1. 附录 A
  2. 附录 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选中 / 禁用