Cell 单元格

单元格组件用于展示列表信息、链接或表单等内容，支持自定义样式、图标、插槽等功能。

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Cell单元格">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
			<zk-cell title="单元格" value="内容" />
			<zk-cell title="单元格" value="内容" label="描述信息" />
		</zk-theme>

		<!-- 展示图标 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="展示图标" align="center" />
			<zk-cell title="单元格" value="内容" icon="home-6-line" />
			<zk-cell title="单元格" value="内容" icon="user-line" icon-color="#2979ff" />
		</zk-theme>

		<!-- 展示箭头 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="展示箭头" align="center" />
			<zk-cell title="右箭头" is-link />
			<zk-cell title="下箭头" is-link arrow-direction="arrow-down-s-line" />
			<zk-cell title="自定义颜色" is-link arrow-color="#2979ff" />
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" align="center" />
			<zk-cell title="背景色" value="内容" bg-color="#f5f7fa" />
			<zk-cell title="文字颜色" value="内容" title-color="#2979ff" value-color="#ff4d4f" />
			<zk-cell 
				title="完整示例" 
				value="内容" 
				label="描述信息" 
				bg-color="#e6f7ff" 
				title-color="#2979ff" 
				label-color="#40a9ff"
				value-color="#1890ff" 
				icon="message-3-line" 
				icon-color="#2979ff" 
				is-link 
				arrow-color="#2979ff" 
			/>
		</zk-theme>

		<!-- 自定义文字大小 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义文字大小" align="center" />
			<zk-cell title="大标题" value="内容" :title-size="32" />
			<zk-cell title="标题" label="大号描述文字" :label-size="28" />
			<zk-cell title="标题" value="大号内容" :value-size="32" />
			<zk-cell 
				title="完整示例" 
				value="内容文字" 
				label="描述文字" 
				:title-size="32" 
				:label-size="26" 
				:value-size="30"
				bg-color="#f5f7fa" 
				title-color="#2979ff" 
				label-color="#40a9ff" 
				value-color="#1890ff"
				icon="message-3-line" 
				icon-color="#2979ff" 
				:icon-size="36" 
				is-link 
				arrow-color="#2979ff"
				:arrow-size="32" 
			/>
		</zk-theme>

		<!-- 小号文字 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="小号文字" align="center" />
			<zk-cell title="小号文字" value="内容" label="描述信息" :title-size="24" :label-size="20" :value-size="24" />
		</zk-theme>

		<!-- 垂直居中 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="垂直居中" align="center" />
			<zk-cell center title="单元格" value="内容" label="描述信息" />
		</zk-theme>

		<!-- 必填/禁用 -->
		<zk-theme type="card" :padding="30" :radius="16"  margin="0 0 30rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="必填/禁用" align="center" />
			<zk-cell required title="必填" value="内容" />
			<zk-cell disabled title="禁用" value="内容" />
		</zk-theme>
	</zk-theme>
</template>

<script>
export default {
	methods: {
		onClick(event) {
			console.log('cell click:', event)
		}
	}
}
</script>

API

CellGroup Props

参数	说明	类型	默认值
title	分组标题	string	-
border	是否显示外边框	boolean	true
title-color	标题颜色，支持主题变量	string	#909399
title-size	标题大小，单位rpx	string / number	28
bg-color	背景颜色，支持主题变量	string	#FFFFFF

主题变量

变量名	默认值	说明
textSecondary	#909399	次要文字颜色
bgCard	#FFFFFF	卡片背景色
borderLight	#EBEEF5	浅色边框颜色

Cell Props

参数	说明	类型	默认值
title	标题	string	-
label	描述信息	string	-
value	右侧内容	string	-
icon	左侧图标名称	string	-
icon-color	图标颜色	string	#323233
icon-size	图标大小	string / number	32
border	是否显示下边框	boolean	true
center	是否垂直居中	boolean	false
required	是否显示必填标记	boolean	false
disabled	是否禁用	boolean	false
is-link	是否展示右侧箭头	boolean	false

Cell Slots

名称	说明
default	自定义右侧内容
title	自定义标题内容
icon	自定义左侧图标
label	自定义描述信息
right-icon	自定义右侧图标

Cell Events

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