Cell 单元格

Cell单元格组件用于显示标题、副标题、描述和图标，支持配置边框、悬停效果、自定义类名等。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page class="p.30" title="列表">
		<t-card class="mb.20" title='Cell 列表' sub-title="列表组件是一个用于展示项目列表的UI元素，支持自定义边框、图标和文本样式，以及hover效果。"></t-card>
		<t-section class="mb.20-tdb-tdr" title='基础功能'></t-section>
		<t-cell title="欢迎使用Tui" class='tdr-mb.30'></t-cell>
		<t-section class="mb.20-tdb-tdr" title='图标+主题+插槽'></t-section>
		<t-cell icon='/static/tabbar/ui1.png' class='tdr-mb.30' title="欢迎使用Tui" desc='+66' descClass="c.red"></t-cell>
		<t-cell icon='/static/tabbar/ui1.png' class='tdr-mb.30' title="欢迎使用Tui">
			<template v-slot:right>
				<t-row class="faic">
					<t-button type="e" size='mini'>取消</t-button>
				</t-row>
			</template>
		</t-cell>
		<t-section class="mb.20-tdb-tdr" title='自定义样式'></t-section>
		<t-cell icon='integral' class='tdr-mb.30-p.30' title="欢迎使用Tui" type="p"></t-cell>
		<t-cell icon='integral' class='tdr-mb.30-h.150-s.80' title="欢迎使用Tui" type="s"></t-cell>
		<t-section class="mb.20-tdb-tdr" title='组合卡片'></t-section>
		<t-card class="mb.30" title="欢迎使用Tui" sub-title="Tui是一个强大的UI库，提供了丰富的组件和灵活的配置，助力开发者快速构建高质量的用户界面。" tag="标签详情">
			<t-cell icon='/static/grid/grid (1).png' :border="true" title="选项1"></t-cell>
			<t-cell icon='/static/grid/grid (2).png' :border="true" title="选项2"></t-cell>
			<t-cell icon='/static/grid/grid (3).png' :border="true" title="选项3"></t-cell>
			<t-cell icon='/static/grid/grid (4).png' :border="true" title="选项4"></t-cell>
		</t-card>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
border	是否显示边框	Boolean	true	false
hover	是否有鼠标悬停效果	Boolean	true	false
desc	描述文本	String	''	-
descClass	描述文本的额外类名	String	''	-
title	标题文本	String	''	-
subTitle	副标题文本	String	''	-
subTitleClass	副标题的额外类名	String	''	-
titleClass	标题的额外类名	String	''	-
icon	图标名称	String	''	-
iconClass	图标的额外类名	String	''	-
rightIcon	右侧图标名称	String	'arrow-right'	-
rightIconClass	右侧图标的额外类名	String	''	-

Events

事件名	描述	回调参数	版本
click	点击触发	-	-

Slots

名称	描述
left	左侧内容插槽
right	右侧内容插槽