Card 卡片

2024-07-09 11:22| 来源: 网络整理| 查看: 265

# Card 卡片概述

Card 卡片，常用的布局组件。

温馨提示

页面重置组件class样式时如果未生效，需在样式后加上 !important。 V2.3.0+ 支持

# 引入以下介绍两种常用的引入方式。第一种：在页面json文件中引入 { "navigationBarTitleText": "卡片", "usingComponents": { "fui-card": "/components/firstui/fui-card/fui-card" } } 123456 第二种：在根目录app.json文件中全局引入 "usingComponents": { "fui-card": "components/firstui/fui-card/fui-card" } 123 # 代码演示部分示例演示，完整使用请参考示例程序以及文档API。基础使用

通过 src 属性设置头像，图标图片地址，title 属性设置标题，tag 属性设置额外信息，如：时间等。

这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。 123 通栏展示

通过 full 属性设置是否通栏，为true时margin-left，margin-right失效。

这是一个基础卡片的示例，此处为自定义内容区域，自行控制内容样式。 123 # Slots 插槽名称说明 default Card主内容部分 footer Card底部显示内容 # Props 属性名类型说明默认值其他说明 margin String margin值 0 32rpx - full Boolean 是否通栏，为true时margin-left，margin-right失效 false - background String 背景色 #fff - radius String 圆角值 16rpx showBorder为false时生效 shadow String 阴影，showBorder为false时有效 0 2rpx 4rpx 0 rgba(2, 4, 38, 0.05) - showBorder Boolean 是否显示边框，为true时box-shadow失效 false - borderColor String 边框颜色 #EEEEEE 为空时可通过css变量（--fui-color-border）修改 headerBackground String header部分背景色 #fff - headerLine Boolean 是否需要header底部线条 true - footerLine V1.7.0+ Boolean 是否需要内容与footer之间线条 false - padding String header padding值 20rpx 20rpx - src String 头像，图标图片地址 - - width Number, String 图片宽度，单位rpx 64 - height Number, String 图片高度，单位rpx 64 - imageRadius String 图片圆角 8rpx - title String 标题 - - size Number, String 标题字体大小，单位rpx 30 - color String 标题字体颜色 #7F7F7F - tag String 标签，额外信息 - - tagSize Number, String 标签字体大小，单位rpx 24 - tagColor String 标签字体颜色 #b2b2b2 - index Number 索引 0 - # Events 事件名说明回调参数 bind:click 点击Card时触发 event.detail = { index:索引} 示例预览 Last Updated: 2/20/2024, 9:19:36 PM

← List 列表 MovableView 可移动的视图容器 →

【本文地址】

Card 卡片

Card 卡片

今日新闻

推荐新闻