# t-cell

Cell 单元格

t-cell 组件介绍

t-cell 是一个列表组件，用于展示项目列表的UI元素，支持自定义边框、图标和文本样式，以及hover效果。组件提供了灵活的内容配置选项，包括左侧图标、标题、副标题、右侧描述和右侧图标等，适合需要展示列表项的场景。

t-cell 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-cell 基础用法

基础用法参考 demo/cell/cell.uvue，通过 title、icon 等属性配置列表项内容。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
			title='Cell 列表'
			sub-title="列表组件是一个用于展示项目列表的UI元素，支持自定义边框、图标和文本样式，以及hover效果。"></t-card>

		<t-cell icon="rocketline"
			title="智能助手全面升级"
			sub-title="响应速度提升40%"
			size="large"
			desc="AI 驱动"
			class="mb-15 r-15"></t-cell>

		<t-cell icon="grid"
			title="深色模式优化"
			sub-title="支持跟随系统自动切换"
			type="primary"
			size="medium"
			class="mb-15 r-15">
			<template #right>
				<t-button size="mini" class="mr-5"
					  type="error">取消</t-button>
			</template>
		</t-cell>

		<t-cell icon="warning-fill"
			title="修复头像上传失败"
			sub-title="处理了ios端选择相册图片后无响应的bug"
			type="error"
			size="small"
			class="mb-15 r-15"></t-cell>
		<t-cell icon="setting-fill"
			title="优化注册登录流程"
			sub-title="简化手机号验证码步骤"
			type="success"
			size="mini"
			class="r-15"></t-cell>
	</view>
</template>

<script setup>
</script>

t-cell Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
border	是否显示底部边框	boolean	true
desc	描述文本	string	''
descClass	描述样式类	any	''
title	标题文本	string	''
subTitle	副标题文本	string	''
subTitleClass	副标题样式类	any	''
titleClass	标题样式类	any	''
icon	图标，支持图标名称或图片路径	string	''
iconClass	图标样式类	any	''
rightIcon	右侧图标，支持图标名称或图片路径	string	'arrow-right'
rightIconClass	右侧图标样式类	any	''

t-cell Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发，返回组件节点信息	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

t-cell Slots

插槽名	说明
default	默认插槽，用于放置标题和副标题内容
left	左侧插槽，用于放置自定义图标内容
right	右侧插槽，用于放置自定义内容