列表

list

行间 1px 分隔线 + hover 底色的分隔列表。

示例

账号安全已开启二次验证
消息通知仅关注的人
数据同步每 15 分钟

<ul class="list">
  <li class="list-item" style="display:flex;align-items:center;gap:8px"><span>账号安全</span><span class="faint" style="margin-left:auto;font-size:11px">已开启二次验证</span></li>
  <li class="list-item" style="display:flex;align-items:center;gap:8px"><span>消息通知</span><span class="faint" style="margin-left:auto;font-size:11px">仅关注的人</span></li>
  <li class="list-item" style="display:flex;align-items:center;gap:8px"><span>数据同步</span><span class="faint" style="margin-left:auto;font-size:11px">每 15 分钟</span></li>
</ul>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/content.css';

用法

<ul class="list">
  <li class="list-item">条目一</li>
  <li class="list-item">条目二</li>
</ul>