Cell 单元格

单元格由分组容器 mu-cell-group 与列表项 mu-cell 组合而成，用于承载列表项与设置项，支持图标、箭头、描述、必填标记以及分组标题、圆角与内嵌卡片样式。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-cell-group 与 mu-cell 的用法，可按需组合。

<template>
  <mu-cell-group>
    <mu-cell title="单元格标题" value="内容"></mu-cell>
    <mu-cell title="单元格标题" value="内容" label="描述信息"></mu-cell>
  </mu-cell-group>
</template>

标题

设置单元格左侧的标题文字。

<mu-cell title="单元格标题"></mu-cell>

内容

设置单元格右侧的内容文字。

<mu-cell title="单元格标题" value="内容"></mu-cell>

描述信息

在标题下方显示描述信息。

<mu-cell title="单元格标题" value="内容" label="描述信息"></mu-cell>

图标

在标题左侧显示图标，取值为图标列表中的名称。

<mu-cell title="个人资料" icon="user" value="查看"></mu-cell>

图标颜色

设置左侧图标的颜色，可使用主题变量或任意合法颜色。

<mu-cell title="图标配色" icon="star1" icon-color="var(--mu-color-warning)"></mu-cell>

图标尺寸

设置左侧图标的尺寸。

<mu-cell title="图标配色" icon="star1" :icon-size="48"></mu-cell>

箭头

开启后在右侧显示箭头，表示可进入下一级。

<mu-cell title="个人资料" value="查看" isLink></mu-cell>

箭头颜色

设置右侧箭头的颜色，可使用主题变量或任意合法颜色。

<mu-cell title="个人资料" value="查看" isLink arrow-color="var(--mu-color-primary)"></mu-cell>

分隔线

控制是否显示底部分隔线。

<mu-cell title="邮箱" :border="false"></mu-cell>

必填标记

开启后在标题前显示必填标记。

<mu-cell title="用户名" required label="此项为必填项"></mu-cell>

可点击

开启后显示按下态，并响应点击事件。

<mu-cell title="可点击单元格" value="点我" isLink clickable @click="onClick"></mu-cell>

分组标题

为分组设置标题，显示在单元格列表上方。

<mu-cell-group title="账号与安全">
  <mu-cell title="账号" value="mural_plus"></mu-cell>
  <mu-cell title="密码" value="修改" isLink></mu-cell>
</mu-cell-group>

圆角分组

将分组显示为圆角样式。

<mu-cell-group round>
  <mu-cell title="账号" value="mural_plus"></mu-cell>
  <mu-cell title="密码" value="修改" isLink></mu-cell>
</mu-cell-group>

内嵌分组

将分组显示为左右留白的内嵌卡片样式。

<mu-cell-group title="外观设置" inset>
  <mu-cell title="深色模式" value="跟随系统" isLink></mu-cell>
  <mu-cell title="字体大小" value="标准" isLink></mu-cell>
</mu-cell-group>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

分组容器

属性名称	说明	类型	默认值
title	分组标题	string	-
round	是否为圆角分组	boolean	false
inset	是否为内嵌卡片式分组，左右留白并带圆角	boolean	false
border	分组内的单元格是否显示分隔线	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

列表项

属性名称	说明	类型	默认值
title	左侧标题	string	-
value	右侧内容文字	string	-
label	标题下方的描述信息	string	-
icon	左侧图标名称	string	-
iconColor	左侧图标颜色	string	var(--mu-cell-icon-color, var(--mu-text-base-color, #666666))
iconSize	左侧图标尺寸	number	40
arrowColor	右侧箭头颜色	string	var(--mu-cell-arrow-color, var(--mu-text-extra-color, #C0C4CC))
isLink	是否显示右侧箭头	boolean	false
border	是否显示底部分隔线	boolean	true
required	是否显示必填标记	boolean	false
clickable	是否可点击，开启后显示按下态	boolean	false
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击单元格时触发	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
default	分组内的单元格列表（mu-cell-group）
title	自定义分组标题（mu-cell-group）
title	自定义左侧标题，优先于 title 属性（mu-cell）
value	自定义右侧内容，优先于 value 属性（mu-cell）
right	箭头之前、右侧内容的自定义区域（mu-cell）