CardList 卡片列表

INFO

将普通列表转换为卡片网格布局。

基本语法

<c-card-list>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</c-card-list>

参数说明

无参数,自动将内部的 <ul><ol> 转换为卡片网格。

使用示例

示例 1:功能列表

<c-card-list>
  <ul>
    <li>
      <strong>🎨 主题定制</strong><br>
      支持自定义主色调和强调色
    </li>
    <li>
      <strong>🌓 深色模式</strong><br>
      三种模式:浅色/深色/跟随系统
    </li>
    <li>
      <strong>📱 响应式</strong><br>
      完美适配各种设备尺寸
    </li>
    <li>
      <strong>🔍 搜索支持</strong><br>
      集成搜索插件,快捷键唤起
    </li>
  </ul>
</c-card-list>

示例 2:工具推荐

<c-card-list>
  <ul>
    <li>
      <strong>VS Code</strong><br>
      最流行的代码编辑器
    </li>
    <li>
      <strong>Figma</strong><br>
      协作设计工具
    </li>
    <li>
      <strong>Notion</strong><br>
      笔记与项目管理
    </li>
  </ul>
</c-card-list>

使用效果