简介

卡片组件用于将内容包裹在卡片容器中展示，提供了统一的样式和交互效果。支持自定义内容、边框样式和阴影效果。支持不同场景下的布局规格。

使用方法

局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "fs-card": "ava-ui/fxui/fs-card/index"
}

代码演示

卡片类型展示

提供三种卡片类型，满足不同场景需求：

• 通栏卡片：适用于列表页等场景，通栏展示
• 圆角卡片：适用于详情页等场景，四周圆角
• 多组件卡片：适用于多个组件组合展示场景，带分割线

尺寸规格展示

提供两种尺寸规格，适应不同场景：

• large：适用于首页、列表页、详情页、工作圈、新建编辑页
• small：适用于企信、我的等场景

布局规格展示

提供三种布局规格，仅对 large 尺寸生效，适用于不同的业务场景：

• Layout 1: 首页/详情页/工作圈卡片（large尺寸）

  • 标题：18px bold
  • 内间距：16px
  • 适用场景：首页、详情页、工作圈等重要信息展示场景

• Layout 2: 新建编辑页卡片（large尺寸）

  • 标题：16px bold
  • 内间距：8px
  • 适用场景：新建编辑页等紧凑布局场景

• Layout 3: 企信-客群侧边栏客户详情页内卡片（large尺寸）

  • 标题：14px bold
  • 内间距：16px
  • 适用场景：企信-客群侧边栏客户详情页内卡片

注意：布局规格仅对 large 尺寸的卡片生效，small 尺寸不受影响。

带操作栏展示

卡片支持在标题栏右侧添加操作区，用于展示按钮、链接等操作项：

• 使用 actions slot 添加操作项
• 支持自定义操作项样式
• 适用于需要快捷操作的场景

骨架屏展示

支持骨架屏功能，优化加载体验：

• 可配置骨架屏类型
• 支持自定义骨架屏数量
• 可控制骨架屏动画效果

清除内外边距展示

支持清除卡片的内外边距，满足特殊布局需求：

• cleanCardPadding：清除所有内间距
• cleanHorizontalPadding：仅清除水平方向内间距
• cleanCardMargin：清除底部外边距
• 适用于需要自定义间距的场景

卡片间距（componentSpacing 属性）

通过 componentSpacing 属性可灵活设置卡片之间的垂直间距（margin-top，单位 px，类型为 Number）：

背景样式展示

支持自定义卡片背景色或背景样式，满足不同设计需求：

• background：设置背景色或背景样式
• 支持纯色、渐变、图片等各种背景样式
• 适用于需要特殊视觉效果的场景

自定义圆角展示

支持自定义卡片圆角大小，满足不同设计规范：

• borderRadius：设置圆角大小
• 支持px、rpx、%等各种单位
• 可覆盖默认的圆角样式
• 适用于需要特定圆角效果的场景

API

参数

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- |-------- | | title | 组件标题 | string | — | '' | | titleStyle | 标题自定义样式 | string | — | '' | | layoutStyleType | 布局类型 | number | 0-通栏卡片 1-圆角卡片 multiple-cmpt-card-多组件卡片 | 0 | | size | 卡片尺寸 | string | large-适用首页、列表页、详情页、工作圈、新建编辑页; small-适用企信、我的 | 'large' | | layout | 布局规格（仅对 large 尺寸生效） | number | 1-首页/详情页/工作圈卡片(内间距16px) 2-新建编辑页卡片(内间距8px) 3-企信-客群侧边栏客户详情页内卡片(内间距16px) | 1 | | cleanCardPadding | 是否清除内间距 | boolean | — | false | cleanHorizontalPadding | 是否清除水平方向内间距 | boolean | — | false | | cleanCardMargin | 是否清除底部间距 | boolean | — | false | background | 组件背景色或背景样式 | string | — | '' | | borderRadius | 自定义圆角大小 | string | — | '' | | showSkeletonScreen | 是否显示骨架屏 | boolean | — | false | skeletonScreenType | 骨架屏类型 | string | — | 'text' | skeletonScreenCount | 骨架屏数量 | number | — | 2 | skeletonScreenDisabledAnimation | 骨架屏是否禁用动画 | boolean | — | true | componentSpacing | 卡片之间的间距（margin-bottom，单位 px） | number | — | 0 | | extStyle | 外部自定义样式 | string | — | '' |

Slot

名称	说明
content	卡片内容
actions	卡片操作区

打开预览