TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
803
3.3m

列表 xCell ​

在线预览
在线模拟尺寸:

介绍 ​

card为true时，圆角可统一全局配置和动态全局配置，保持所有页面列表样式统一，免于一个一个配置。

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-cell/x-cell.uvue

使用 ​

ts

<x-cell></x-cell>

Props 属性 ​

名称说明类型默认值
icon左图标
string""
avatarRound左侧图标、头像圆角。默认为8
string"8"
color背景的主题色
string'white'
darkColor暗黑背景的主题色，空值时取sheetDarkColor
string''
iconColor图标色,空值时取全局主题值。
string""
title标题
string"标题"
titleColor标题颜色
string"black"
darkTitleColor暗黑标题颜色，如果不填写取白
string"white"
titleSize标题大小
string"16"
iconSize图标大小
string"24"
label右边文本
string""
labelColor右边文本颜色
string"#bfbfbf"
labelSize右侧label文字大小
string"13"
desc标题正文的简介文本
string""
showBottomBorder是否显示下边线
booleantrue
bottomBorderInsert是否让下边线显示居右，不贯穿到左边。
booleanfalse
bottomBorderColor下边线的颜色。如果你设定了的话。
暗黑的边颜色失效，采用你自定的颜色。
string""
link是否显示链接状态，有点按效果。包括出现右边跳转指示。
关闭的话，事件反应和跳转会更快。
如果true右侧箭头图标会显示
booleantrue
linkColor右指示图标的颜色
string'#bfbfbf'
linkDarkColor右指示图标的暗黑颜色
string'#bfbfbf'
url需要跳转的页面地址。
如果填写了右侧箭头图标会显示
跳转时如果失败会回退到switchTab跳转。
string""
card是否是卡片模式
booleantrue
round卡片模式圆角,不填写采用全局的cardRadius属性值.
string""
leftSize左边图标区域宽和高的大小。
string'32'
minHeight最小高度，主要是用来统一风格高度不至于让点击范围过小
如果你需要紧凑型可以设置为auto
string"55"
disabled是否禁用url跳转，当link为true或者url需要跳转时
如果禁用，点击时不会触发跳转。
booleanfalse
padding内间隙[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下
空数组时取全局值
Array() : string[] => ['12', '0'] as string[]
marginmargin 同sheet原理
[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下
空数组时取全局值cellMargin
Array() : string[] => [] as string[]
rightWidth右侧label宽，插槽时，这个属性不会生效
以你自己布局宽为准。
string"100"

Events 事件 ​

名称参数说明
click-项目点击
update:show-等同v-model:show

Slots 插槽 ​

名称说明数据
avatar头像图标icon: string
default默认标题插槽-
desc简介desc: string
label右边文字label: string
right右插槽-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/cell

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">列表组 Cell</x-text>
			<x-text color="#999999">
				插槽丰富方便自定义自己的样式
			</x-text>
		</x-sheet>

		<x-cell :link="false" url="/pages/index/button" icon="apps-line" title="常见组件库"></x-cell>
		<x-cell title="应用设置" url="/pages/index/icon" icon="price-tag-3-line" label="+￥32非卡片模式非卡片模式非卡片模式非卡片模式" label-color="red"
			icon-color="red"></x-cell>
		<x-cell title="聊天介绍" url="/pages/index/tag" icon="message-3-line" label="tmx测试" icon-color="green"></x-cell>

		<x-sheet :margin="['16']">
			<x-text font-size="18" class=" text-weight-b ">非卡片模式 Cell</x-text>
			<x-text color="#999999">
				底边线可以左对齐或者右内对齐。
			</x-text>
		</x-sheet>

		<x-sheet :padding="['0']">
			<x-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="color-filter-line"
				desc="UTS版本tmui组件库,高质量库" title="常见组件库"></x-cell>
			<x-cell title="价格设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon" icon="server-line"
				label="+￥32" label-color="red" icon-color="red"></x-cell>
			<x-cell title="书签读书" :bottomBorderInsert="true" :card="false" icon="book-marked-line" url="/pages/index/tag"
				label="tmx测试" icon-color="orange"></x-cell>
			<x-cell title="标签页面" :bottomBorderInsert="true" :card="false" :show-bottom-border="false" icon="gift-line"
				url="/pages/index/tag" label="tmx测试" icon-color="success"></x-cell>
		</x-sheet>




		<view class="py-32"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

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

			};
		},
		onLoad() {

		}
	}
</script>

<style lang="scss">

</style>
最近更新