MiniX自绘渲染跨平台框架

# Cell 列表项

请扫码查看示例

# 介绍

基础的列表项展示可承载文字、图标、段落，常用于内容展示页面。

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 title 属性显示一个最简单的列表项。

<element name="m-cell" src="@/node_modules/mui-minix/src/cell/index"></element>
<m-cell title="饮食禁忌"></m-cell>
1
2

# 描述

通过设置 desc 属性，可以显示描述。

<element name="m-cell" src="@/node_modules/mui-minix/src/cell/index"></element>
<m-cell title="饮食禁忌" desc="无"></m-cell>
<m-cell title="饮酒情况" desc="不饮酒或一周小于1次"></m-cell>
1
2
3

# 右边箭头

通过设置 show-link 属性, 可以显示右边箭头。

<element name="m-cell" src="@/node_modules/mui-minix/src/cell/index"></element>
<m-cell title="饮食禁忌" desc="无" show-link="{{true}}"></m-cell>
<m-cell title="饮酒情况" desc="不饮酒或一周小于1次" show-link="{{true}}"></m-cell>
1
2
3

# 图标

通过设置 icon 可以在左边显示图标。

通过设置 icon-size 可以控制图标的大小。该属性支持 string 以及 number 类型。当为 string 类型时，其值必须是 small middle large 之一。否则不生效。icon-size 默认未设置。表示图标的大小跟随列表的大小自动变化。

通过设置 icon-dot 属性，可以在图标右上角显示一个红色小点。默认为 false。

通过设置 icon-color 属性, 可以控制图标的背景颜色。

通过设置 icon-round 属性, 可是控制图标是否显示为圆形。

icon-size 尺寸表：

尺寸名 尺寸值
small 20
middle 32
large 48
<element name="m-cell" src="@/node_modules/mui-minix/src/cell/index"></element>
<m-cell title="多行列表" icon="http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/mail.png" show-link="{{true}}"></m-cell>
<m-cell
  title="电风扇"
  tags="{{['卧室']}}"
  size="middle"
  show-link="{{true}}"
  icon="http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_07@3x.png"
  icon-size="large"
  icon-round="{{true}}"
  icon-color="#f2f2f2"
></m-cell>
<m-cell
  title="空调"
  subtitle="自动开关机，调节到合适模式"
  icon="http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_01@3x.png"
  icon-color="#f2f2f2"
  tags="{{['卧室']}}"
  icon-size="large"
  icon-round="{{true}}"
  icon-dot="{{true}}"
  size="middle"
  show-link="{{true}}"
></m-cell>
<m-cell
  title="摇头/摆风"
  icon="http://dolphin-weex-dev.msmartlife.cn/static/component/cell/image/icon-eco.png"
  size="middle"
  icon-size="middle"
  icon-round="{{true}}"
  icon-color="#267aff"
></m-cell>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 副标题

通过设置 subtitle 属性可以显示副标题。

<element name="m-cell" src="@/node_modules/mui-minix/src/cell/index"></element>
<m-cell
  title="空调"
  subtitle="自动开关机，调节到合适模式"
  icon="http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_01@3x.png"
  icon-color="#f2f2f2"
  tags="{{['卧室']}}"
  icon-size="large"
  icon-round="{{true}}"
  size="middle"
  show-link="{{true}}"
></m-cell>
1
2
3
4
5
6
7
8
9
10
11
12

# 单元格尺寸

通过设置 size 属性可以控制单元格的大小。单元格支持 small middle large 三种尺寸，默认值为 small。

尺寸表:

尺寸名 尺寸值
small 52
middle 80
large 110
<element name="m-cell" src="@/node_modules/mui-minix/src/cell/index"></element>
<m-cell title="饮酒情况" desc="不饮酒或一周小于1次" show-link="{{true}}"></m-cell>
<m-cell
  title="电风扇"
  tags="{{['卧室']}}"
  size="middle"
  show-link="{{true}}"
  icon="http://dolphin-weex-dev.msmartlife.cn/cdn/images/smart/ico_smart_07@3x.png"
  icon-size="large"
  icon-round="{{true}}"
  icon-color="#f2f2f2"
></m-cell>
<m-cell
  title="列表标题"
  subtitle="摘要文字、摘要文字、摘要文字、摘要文字文字描述有转行情况、文字描述有转行情况。孤琴临万壑，宿鸟语千山。淡淡云烟处，飘飘玉洞还。"
  stamp="时间提示"
  size="large"
></m-cell>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Api

# Props

字段 说明 类型 默认值 是否必须
padding-left 左侧留白 number 16 否
padding-right 右侧留白 number 16
size 尺寸, 支持 small middle large string small 否
icon-size 图标尺寸, 支持 small middle large string | number - 否
icon-dot 图标右上角红点 boolean false 否
icon-color 图标背景颜色 string - 否
icon-round 是否圆形图标 boolean false 否
title 标题 string - 是
subtitle 副标题 string - 否
desc 描述 string - 否
tags 标签（显示在标题后面） string[] [] 否
tag-color 标签背景颜色 string #f2f2f2 否
tag-text-color 标签文本颜色 string #666666 否
card 下划线右侧是否缩进 boolean false 否
disabled 禁用状态 boolean false 否
show-link 是否显示右侧三角 boolean false 否
show-border 是否显示下划线 boolean true 否
stamp 戳记（在特殊性单元格中，用于显示右上角文本） string - 否

# Events

事件名称 说明 回调参数
m-click 点击时触发 -

# Slots

名称 说明
default 自定义单元格描述右侧内容
prefix 自定义单元格图标左侧内容