Cell (列表)
列表组件是一个用于展示项目列表的UI元素，支持自定义边框、图标和文本样式，以及hover效果。
支持平台
| 安卓 | ios | 鸿蒙 | web | 微信小程序 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page main-class="p-30">
<t-card main-class="mb-20" title='Cell 列表' sub-title="列表组件是一个用于展示项目列表的UI元素，支持自定义边框、图标和文本样式，以及hover效果。"></t-card>
<t-section main-class="mb-20" title='主题+type'></t-section>
<t-cell icon="map" title="欢迎使用Tui" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="i" effect="" main-class='mb-30 tdr' :disabled="true"
@click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="w" effect="" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="p" effect="" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="e" effect="" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-section main-class="mb-20" title='主题+effect'></t-section>
<t-cell icon="map" title="欢迎使用Tui" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="normal" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="dark" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="disabled" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="light" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="plain" main-class='mb-30 tdr' @click="onclick"></t-cell>
<t-section main-class="mb-20" title='主题+size'></t-section>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="normal" size="large" main-class='mb-30 tdr'></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="dark" size="medium" main-class='mb-30 tdr'></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="disabled" size="small" main-class='mb-30 tdr'></t-cell>
<t-cell icon="map" title="欢迎使用Tui" type="s" effect="light" size="mini" main-class='mb-30 tdr'></t-cell>
<t-cell icon="/static/tabbar/ui1.png" title="欢迎使用Tui" effect="normal" size="large" main-class='mb-30 tdr'></t-cell>
<t-cell icon="/static/tabbar/ui1.png" title="欢迎使用Tui" effect="dark" size="medium" main-class='mb-30 tdr'></t-cell>
<t-cell icon="/static/tabbar/ui1.png" title="欢迎使用Tui" effect="disabled" size="small"
main-class='mb-30 tdr'></t-cell>
<t-cell icon="/static/tabbar/ui1.png" title="欢迎使用Tui" effect="light" size="mini" main-class='mb-30 tdr'></t-cell>
<t-section main-class="mb-20-tdb-tdr" title='图标+主题+插槽'></t-section>
<t-cell icon='/static/tabbar/ui1.png' main-class='mb-30 tdr' title="欢迎使用Tui" desc='+66' desc-class="c-red"></t-cell>
<t-cell icon='/static/tabbar/ui1.png' main-class='mb-30 tdr' title="欢迎使用Tui">
<template v-slot:right>
<t-button @click="onclick" type="s" size='mini'>取消</t-button>
</template>
</t-cell>
<t-section main-class="mb-20-tdb-tdr" title='自定义样式'></t-section>
<t-cell icon='integral' main-class='mb-30 p-30' title="欢迎使用Tui" type="p"></t-cell>
<t-cell icon='integral' main-class='mb-30 h-150 s-80 c-blue' title="欢迎使用Tui" type="s"></t-cell>
<t-section main-class="mb-30" title='组合卡片'></t-section>
<t-card main-class="mb-30 p-0" title="欢迎使用Tui" title-class="sfwb p-20"
sub-title-class="slh-60 sls-10 ato-l,t plr-20" sub-title="Tui是一个强大的UI库，提供了丰富的组件和灵活的配置，助力开发者快速构建高质量的用户界面。">
<t-cell main-class="ptb-30" icon='/static/grid/grid (1).png' :border="true" title="欢迎使用Tui"></t-cell>
<t-cell main-class="ptb-30" icon='/static/grid/grid (2).png' :border="true" title="欢迎使用Tui"></t-cell>
<t-cell main-class="ptb-30" icon='/static/grid/grid (3).png' :border="true" title="欢迎使用Tui"></t-cell>
<t-cell main-class="ptb-30" icon='/static/grid/grid (4).png' :border="true" title="欢迎使用Tui"></t-cell>
</t-card>
</t-page>
</template>
<script setup>
function onclick() {
console.log('欢迎使用Tui')
}
</script>属性
| 名称 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
| type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
| disabled | Boolean | false | 组件是否禁用 | false, true |
| stop | Boolean | false | 是否阻止事件冒泡（Tui统一写法处理事件冒泡） | false, true |
| hover | Boolean | true | 是否有点击效果 | false, true |
| path | String | "" | 点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。 | - |
| mainClass | String | "" | 组件根节点的样式 | - |
| nativeClass | String | "" | 组件根节点原生样式 | - |
| effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
| desc | String | `` | 描述 | |
| descClass | String | `` | 描述样式 | |
| subTitle | String | `` | 副标题 | |
| titleClass | String | `` | 标题样式 | |
| iconClass | String | `` | 图标样式 | |
| hover | Boolean | true | 是否点击效果 | |
| title | String | `` | 标题 | |
| subTitleClass | String | `` | 副标题样式 | |
| icon | String | `` | 图标 | |
| rightIcon | String | arrow-right | 右侧图标 | |
| rightIconClass | String | `` | 右侧图标样式 | |
| border | Boolean | false | 是否显示底部边框 |
事件
| 名称 | 返回参数 | 说明 |
|---|---|---|
| click | (e : UniPointerEvent) | - |
插槽
| 名称 | 返回值 | 说明 |
|---|---|---|
| name | - | |
| default | - |