cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。

基础功能

该组件需要搭配cell-group使用，通过title设置左侧标题，value设置右侧内容，通过label添加描述信息。

<un-cell-group>
	<un-cell title="uView Next" value="内容" :isLink="true"></un-cell>
	<un-cell title="利剑出鞘,一统江湖" value="内容" label="挣脱束缚,向往自由"></un-cell>
</un-cell-group>

自定义图标/图片

通过icon属性可以设置图标名称或图片链接，支持本地图标和网络图片。

<un-cell-group>
	<un-cell title="单元格" icon="lock-fill"></un-cell>
	<un-cell title="单元格" icon="https://cdn.uviewui.com/uview/example/tag.png"></un-cell>
</un-cell-group>

自定义大小

通过设置size属性为large，可以创建更大的单元格，适用于需要突出显示的场景。

<un-cell-group>
	<un-cell size="large" title="单元格" value="内容" isLink></un-cell>
	<un-cell size="large" title="单元格" value="内容" label="描述信息"></un-cell>
</un-cell-group>

显示右箭头

设置isLink为true，将会显示右侧的箭头，可以通过arrow-direction控制箭头的方向，包括up、down、left、right。

<un-cell-group>
	<un-cell required title="单元格" value="组件" isLink></un-cell>
	<un-cell title="单元格" value="工具" arrow-direction="up" isLink></un-cell>
	<un-cell title="单元格" value="模板" arrow-direction="down" isLink></un-cell>
</un-cell-group>

跳转页面

设置isLink为true，单元格点击可跳转页面，通过url属性设置跳转地址。

<un-cell-group>
	<un-cell title="打开标签页" isLink url="/pages/componentsB/tag/tag"></un-cell>
	<un-cell title="打开徽标页" isLink url="/pages/componentsB/badge/badge"></un-cell>
</un-cell-group>

右侧内容垂直居中

设置center为true，可将右侧内容垂直居中，适用于需要调整对齐方式的场景。

<un-cell-group>
	<un-cell title="单元格" value="内容" label="描述信息" center></un-cell>
</un-cell-group>

自定义插槽

通过插槽可以自定义单元格的内容，title插槽自定义左侧区域内容，value插槽自定义右侧区域内容。

<un-cell-group>
	<un-cell value="内容">
		<template #title>
			<view class="u-slot-title">
				<text class="un-cell-text">单元格</text>
				<un-tag text="标签" plain size="mini" type="warning"></un-tag>
			</view>
		</template>
	</un-cell>
	<un-cell title="单元格" isLink>
		<template #value>
			<text>99</text>
		</template>
	</un-cell>
</un-cell-group>

API

CellGroup Props

参数	说明	类型	默认值
title	分组标题	string	-
border	是否显示外边框	boolean	true
round	设置圆角值	string	-
borderColor	边框颜色	string	-
backgroundColor	背景颜色	string	-

Cell Props

参数	说明	类型	默认值
title	左侧标题	string | number	-
label	标题下方的描述信息	string | number	-
value	右侧的内容	string | number	-
icon	左侧图标名称，或者图片链接(本地文件建议使用绝对地址)	string	-
disabled	是否禁用cell	boolean	false
border	是否显示下边框	boolean	true
borderColor	边框颜色	string	-
center	内容是否垂直居中(主要是针对右侧的value部分)	boolean	false
url	点击后跳转的URL地址	string	-
linkType	链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作	Enum	navigateTo
clickable	是否开启点击反馈(表现为点击时加上灰色背景)	boolean	false
isLink	是否展示右侧箭头并开启点击反馈	boolean	false
required	是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)	boolean	false
rightIcon	右侧的图标箭头	string	arrow-right
arrowDirection	右侧箭头的方向	Enum	right
iconStyle	左侧图标样式	object | string	-
rightIconStyle	右侧箭头图标的样式	object | string	-
titleStyle	标题的样式	object | string	-
size	单位元的大小，可选值为large	Enum	-
stop	点击cell是否阻止事件传播	boolean	true
name	标识符，用于在click事件中进行返回	string | number	-

Cell Slot

名称	说明
title	自定义左侧标题部分的内容
value	自定义右侧标题部分的内容
icon	自定义左侧的图标
right-icon	自定义右侧图标内容，需设置arrow为false才起作用
label	自定义label内容

Cell Events

事件名	说明	类型
click	点击cell列表时触发	Function