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

Css 变量

关于组件 Css 变量的用法，请参考 组件 Css 变量用法。

变量名	默认值	说明
--un-cell-padding	10px 15px	单元格内边距
--un-cell-large-padding	13px 15px	大尺寸单元格内边距
--un-cell-line-bg-color	$border-color	单元格边框背景颜色
--un-cell-line-height	1px	单元格边框高度
--un-cell-line-transform	scaleY(0.5)	单元格边框缩放比例
--un-cell-left-icon-wrap-margin-right	4px	左侧图标容器右边距
--un-cell-right-icon-wrap-margin-left	4px	右侧图标容器左边距
--un-cell-title-text-font-size	$text-base	标题字体大小
--un-cell-title-text-line-height	$line-base	标题行高
--un-cell-title-text-color	$text-color	标题颜色
--un-cell-title-text-large-font-size	$text-lg	大尺寸标题字体大小
--un-cell-label-margin-top	5px	标签上边距
--un-cell-label-font-size	$text-sm	标签字体大小
--un-cell-label-color	$text-color-muted	标签颜色
--un-cell-label-line-height	$line-sm	标签行高
--un-cell-label-large-font-size	$text-base	大尺寸标签字体大小
--un-cell-value-font-size	$text-sm	右侧内容字体大小
--un-cell-value-line-height	$line-sm	右侧内容行高
--un-cell-value-color	$text-color-muted	右侧内容颜色
--un-cell-value-large-font-size	$text-base	大尺寸右侧内容字体大小
--un-cell-required-font-size	$text-base	必填星号字体大小
--un-cell-required-color	$color-error	必填星号颜色
--un-cell-required-left	-6px	必填星号左边距
--un-cell-required-top	-2px	必填星号上边距
--un-cell-clickable-bg-color	$bg-color	点击反馈背景颜色
--un-cell-disabled-color	$text-color-disabled	禁用状态颜色