Mind UI

# Cell 单元格

# 介绍

单元格，可用作展示列表信息、链接或者表单等。

# 引入

若在多个页面中使用此组件，建议在 app.json 中引入组件

"usingComponents": {
	"m-cell-group": "/dist/cell-group/index",
	"m-cell": "/dist/cell/index"
}

# 示例

# 基础用法

<!-- 单独使用 -->
<m-cell icon="love" icon-color="#00CDA2" title="文本" value="内容" />

# 自定义内容

<m-cell icon="feed" icon-color="#00CDA2" title="自定义内容">
	<m-switch v-model="checked" />
</m-cell>

# 可点击的链接

<m-cell icon="location" icon-color="#00CDA2" title="标题文字" url="/pages/home/index" />

# 单元格组

<m-cell-group title="单元格分组" border card>
	<!-- 自定义分组后缀 -->
	<div slot="group-suffix">
		<m-icon name="category" />
	</div>

	<!-- cell 列表 -->
	<m-cell icon="love" icon-color="#00CDA2" title="图标+标题" />
	
	<m-cell icon="location" icon-color="#00CDA2" title="跳转" url="/pages/home/index" />

	<m-cell icon="tag" icon-color="#00CDA2" title="标签">
		<div class="tag-group">
			<m-tag type="warning" round>标签</m-tag>
			<m-tag m-class="tag" type="success" round>标签</m-tag>
			<m-tag m-class="tag" type="warning">标签</m-tag>
		</div>
	</m-cell>

	<m-cell icon="feed" icon-color="#00CDA2" title="表单组件">
		<m-switch v-model="switch" />
	</m-cell>

	<m-cell icon="feed" icon-color="#00CDA2" title="表单组件">
		<m-checkbox v-model="checked" checked-color="#00CDA2" />
	</m-cell>

	<m-cell icon="edit" icon-color="#00CDA2" title="文本" value="内容区" />
</m-cell-group>

# Api

# Cell Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式 String - -
icon 左侧图标或图片 String - -
title 左侧标题 String - -
value 右侧内容 String - -
border 是否显示下边框 Boolean - false
url 点击跳转链接地址 String - -
link-type 跳转类型 String navigateTo redirectTo switchTab reLaunch navigateTo

# Cell Events

事件名称 说明 返回值
click cell 点击事件回调，可自定义绑定 data- 属性 event

# Cell Group Properties

参数 说明 类型 可选值 默认值
custom-class 根节点样式类 String - -
title 分组标题，为空时不显示 String - -
border 是否给每个 cell 显示下边框（最后一个无下边框） Boolean - true
card 是否为卡片式 Boolean - false

# Slot

名称 说明
group-suffix 分组 header 的后缀内容

← Grid 宫格 →