TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
458
1.9m

卡片 xCard ​

在线预览
在线模拟尺寸:

介绍 ​

圆角，主题可统一全局配置风格。

平台兼容 ​

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

文件路径 ​

ts

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

使用 ​

ts

<x-card></x-card>

Props 属性 ​

名称说明类型默认值
padding内容的内边距。
string"16"
titleSize标题文字大小
string"18"
btnColor按钮颜色
string""
color标题颜色
string"#333333"
bgColor背景颜色
string"#ffffff"
darkBgColor暗黑背景颜色，如果为空，取sheetDarkColor
string""
btns底部按钮数组。如果不满意风格布局请使用插槽footer来布局
Array() : string[] => [] as string[]
subtitle副标题
string""
title标题
string""
statusIcon右边的小图标，如果你是想显示状态，日期请使用对应插槽
string"more-fill"
content中间内容。如果有大量内容请直接在默认插槽(标签内)内布局
string""
image头部图片地址。
string""
imageHeight头图片高度
string"150"
round圆角请不要动态更改此会，默认为空，取全局设置的风格值。
string""
shadow请不要动态更改些投影值，截止4.75+鸿蒙无法使用投影
string"0 3px 10px rgba(0, 0, 0, 0.05)"
btnSize按钮尺寸
BtnSizeType"small" as BtnSizeType

Events 事件 ​

名称参数说明
click-卡片被点击
status-右边状态小图标被点击
action-底部按钮被点击

Slots 插槽 ​

名称说明数据
image图片插槽-
title标题插槽-
statusIcon状态右边小图标插槽-
subtitle副标题插槽-
default默认内容插槽-
footer底部插槽-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/zhanshi/card

示例源码 ​

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-card class="mx-16 my-8"
			 
			image="https://store.tmui.design/api/randomImg?random=183"
			title="我就是无法将你移除脑海" subtitle="Girl it's more than I dare to think about" :btns="['付款','详细']"
			content="女孩 我奢望的远不止于此 There's a dark secret in me 我还有个不为人知的秘密 Don't leave me locked in your heart 不要将我锁入你的心里"
			>
			</x-card>
			<x-card class="mx-16 mb-8"
			dark-bg-color="#333"
			title="我就是无法将你移除脑海" subtitle="自定义暗黑背景" :btns="['操作']"
			>
			</x-card>
			<x-card class="mx-16 mb-8"
			title="我就是无法将你移除脑海" subtitle="Girl it's more than I dare to think about" :btns="['操作']"
			>
				<x-image src="https://store.tmui.design/api/randomImg?random=18366"></x-image>
				<x-text>
					Girl it's more than I dare to think about
					女孩 我奢望的远不止于此
				</x-text>
			</x-card>
			<x-card class="mx-16 mb-8" 
			status-icon="" title="Tmui4.0x" subtitle="Girl it's more than I dare to think about" :btns="['操作']"
			>
			</x-card>
		<view class="pa-16"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

</style>
最近更新