List 列表

用于将多个单元格 Cell 组合收纳的列表容器，提供统一的组标题、组页脚提示文本与卡片圆角分割边框。

---

代码示例

1. 基础消息分组列表 (Basic List)

结合 mu-cell 单元格进行列表项填充。设置 header 指定列表组顶置标题。

<template>
  <mu-list header="常用功能分组" bordered>
    <mu-cell title="个人中心" icon="user" is-link @click="onCellClick('个人中心')" />
    <mu-cell title="消息通知" icon="bell" value="99+" is-link @click="onCellClick('消息通知')" />
    <mu-cell title="通用设置" icon="settings" is-link @click="onCellClick('通用设置')" />
  </mu-list>
</template>

<script setup>
const onCellClick = (name) => {
  console.log('点击列表项:', name)
}
</script>

---

2. 卡片化列表与底栏提示 (Card List)

设置 card 开启悬浮卡片圆角，设置 footer 增加底部说明文字。

<template>
  <mu-list
    header="安全与隐私"
    footer="开启双重认证可有效提高账号安全防护级别"
    card
    bordered
  >
    <mu-cell title="双重身份验证" value="已开启" is-link />
    <mu-cell title="设备管理" value="3 台常用设备" is-link />
  </mu-list>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
header	列表组顶部文案标题	String	-	''
footer	列表组底部提示或说明文本	String	-	''
bordered	是否显示周边整体边框	Boolean	true | false	false
card	是否开启卡片化悬浮圆角	Boolean	true | false	false

---

插槽说明 (Slots)

插槽名	说明
default	列表项集合 (通常填入 mu-cell)
header	自定义列表顶部标题
footer	自定义列表底部页脚文本