T-Cell 单元格

• 示例代码路径：/pages/components/t-cell/t-cell
• 示例代码地址：https://gitee.com/turbo-ui/turbo-ui-demo/tree/master/pages/components/t-cell/t-cell

兼容端

安卓	苹果	Web	鸿蒙	微信小程序
✅	✅	✅	❌	✅

使用示例

<template>
    <t-card title="普通模式" :show-title="true">
        <t-cell :ma="['0','0','10','0']"></t-cell>
        <t-cell :ma="['0','0','10','0']" icon="home-fill"></t-cell>
        <t-cell :ma="['0','0','10','0']" :is-link="false"></t-cell>
        <t-cell :ma="['0','0','10','0']" icon="home-fill" :is-link="false"></t-cell>
        <t-cell :ma="['0','0','10','0']" icon="home-fill">
            <template v-slot:right>
                <image src="/static/logo.png" style="width: 20px;height:20px;"></image>
            </template>
        </t-cell>
    </t-card>
    <t-card title="信息模式" :show-title="true">
        <t-cell mode="info" :ma="['0','0','10','0']">
            <template v-slot:info>
                <t-text size="11" color="#666666">你好呀，Turbo UI</t-text>
            </template>
        </t-cell>
        <t-cell mode="info" :ma="['0','0','10','0']" icon="home-fill">
            <template v-slot:info>
                <t-text size="11" color="#666666">你好呀，Turbo UI</t-text>
            </template>
        </t-cell>
        <t-cell mode="info" :ma="['0','0','10','0']" :is-link="false"></t-cell>
        <t-cell mode="info" icon="home-fill" :is-link="false"></t-cell>
    </t-card>
    <t-card title="自定义样式" :show-title="true">
        <t-cell :dark="false" title="自定义背景色" bgColor="#f5f5f5" mode="info" :ma="['0','0','10','0']"></t-cell>
    </t-card>
</template>

属性

属性名	类型	默认值	说明
title	String	"Turbo UI"	标题
titleColor	String	""	标题颜色
mode	String	"ordinary"	卡片模式，可选值：ordinary/info
titleSize	String	"13"	标题大小
round	Array<string>	[]	圆角，格式：[水平半径, 垂直半径] 或 [左上, 右上, 右下, 左下]
bgColor	String	"#ffffff"	背景颜色
ma	Array<string>	[]	外边距，格式：[垂直, 水平] 或 [上, 右, 下, 左]
pa	Array<string>	['6','8']	内边距，格式：[垂直, 水平] 或 [上, 右, 下, 左]
isLink	Boolean	true	是否为链接模式
icon	String	""	左侧图标
iconColor	String	""	图标颜色
iconSize	String	'16'	图标大小
height	String	'34'	高度
linkColor	String	"#666666"	链接图标颜色
linkSize	String	'16'	链接图标大小
dark	Boolean	true	是否自动暗黑模式
iconDark	Boolean	false	是否开启图标暗黑模式自适应
showBorder	Boolean	true	是否显示底部边线
borderColor	String	""	底部边线颜色
linkMode	String	"navigateTo"	链接模式，可选值：navigateTo/redirectTo/reLaunch/switchTab/navigateBack
linkUrl	String	""	链接地址

方法

方法名	说明	参数
click	单元格点击事件	Event

插槽

插槽名	说明
left	左侧内容插槽
info	信息内容插槽（在mode为info时使用）
right	右侧内容插槽