低代码高性能原生UI框架Card 卡片
组件类型：UxCardComponentPublicInstance
支持图标、标题、副标题及样式自定义，支持内边距和外边距设置，可显示阴影和边框
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| direction | String | 'row' | 布局方向 |
| title | String | - | 标题 |
| size | Number | $ux.Conf.fontSize | 标题大小 |
| color | String | $ux.Conf.fontColor | 标题颜色 |
| darkColor | String | - | 深色 |
| bold | Boolean | false | 标题加粗 |
| titleStyle | String | - | 标题样式 |
| subtitle | String | - | 副标题 |
| subtitleColor | String | $ux.Conf.secondaryColor | 副标题颜色 |
| subtitleSize | Number | $ux.Conf.fontColor.small | 副标题大小 |
| subtitleStyle | String | - | 副标题样式 |
| icon | String | - | 标题图标 |
| iconColor | String | $ux.Conf.fontColor | 标题图标颜色 |
| iconSize | Number | $ux.Conf.fontSize | 标题图标大小 |
| iconStyle | String | - | 标题图标样式 |
| customFont | String | - | 自定义字体路径 |
| customFamily | String | - | 自定义字体family |
| background | String | $ux.Conf.backgroundColor | 背景色 |
| backgroundDark | String | - | 深色 |
| shadow | Boolean | false | 显示阴影 |
| border | Boolean | false | 显示边框 |
| borderColor | String | $ux.Conf.borderColor | 边框颜色 |
| borderDarkColor | String | - | 深色 |
| padding | Number | 0 | 内部水平边距 |
| margin | Number | 15 | 边距 |
direction
| 值 | 说明 |
|---|---|
| row | 水平 |
| column | 垂直 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="卡片" :bold="true">
<ux-text text="支持图标、标题、副标题及样式自定义，支持内边距和外边距设置，可显示阴影和边框"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="卡片" text="https://www.uxframe.cn/component/layout/card.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="标题" subtitle="副标题" subtitle-color="green" :bold="true">
<ux-text text="可设置标题、副标题及样式" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="边距" :bold="true" :margin="30">
<ux-text text="支持内边距和外边距设置" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="边框" :bold="true" :border="true">
<ux-text text="支持显示边框" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="阴影" :bold="true" :shadow="true">
<ux-text text="支持显示阴影" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="卡片" :bold="true">
<ux-text text="支持图标、标题、副标题及样式自定义，支持内边距和外边距设置，可显示阴影和边框"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="卡片" text="https://www.uxframe.cn/component/layout/card.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="标题" subtitle="副标题" subtitle-color="green" :bold="true">
<ux-text text="可设置标题、副标题及样式" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="边距" :bold="true" :margin="30">
<ux-text text="支持内边距和外边距设置" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="边框" :bold="true" :border="true">
<ux-text text="支持显示边框" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="阴影" :bold="true" :shadow="true">
<ux-text text="支持显示阴影" :mb="15"></ux-text>
<ux-row>
<view class="b"></view>
<view class="b"></view>
<view class="b"></view>
</ux-row>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
.b {
margin-right: 10px;
width: 50px;
height: 40px;
border-radius: 5px;
background-color: #285655;
}
</style><style lang="scss">
.b {
margin-right: 10px;
width: 50px;
height: 40px;
border-radius: 5px;
background-color: #285655;
}
</style>