卡片

WdCard

适用场景

卡片容器，可承载文字、按钮、图片等

基础能力说明

卡片的基础属性可配置卡片顶部，卡片内容，卡片底部的显隐
卡片的高级属性可配置分割线显隐

示例

交互式预览

样式 API 自定义样式

/* 修改顶部样式，背景色，内边距，对齐方式 */
.wd-card-root .wd-card__header {
  background-color: #e8e8e8;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
/* 修改内容样式，背景色，内边距，对齐方式 */
.wd-card-root .wd-card__body {
  background-color: #f0f0f0;
  padding: 15px;
  display: flex;
  justify-content: center;
}
/* 修改底部样式，背景色，内边距，对齐方式 */
.wd-card-root .wd-card__footer {
  background-color: #f9f9f9;
  padding: 20px;
  display: flex;
  justify-content: start;
}

属性

组件接收的外部传入的属性

显示卡片顶部	`showHeader`	`boolean`	显示卡片顶部默认值：true
显示卡片内容	`showContent`	`boolean`	显示卡片内容默认值：true
显示卡片底部	`showFooter`	`boolean`	显示卡片底部
显示分割线	`showDivider`	`boolean`	显示分割线默认值：true

事件

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

点击

tap

兼容三端

属性 API

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value

显示卡片顶部	`showHeader`	`boolean`	显示卡片顶部
显示卡片内容	`showContent`	`boolean`	显示卡片内容
显示卡片底部	`showFooter`	`boolean`	显示卡片底部
显示分割线	`showDivider`	`boolean`	显示分割线

方法 API

无

样式 API

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式

根元素	`.wd-card-root`	卡片组件根元素
PC 端卡片组件根元素	`.wd-pc-card-root`	可以为 PC 端的卡片组件编写样式
H5 端卡片组件根元素	`.wd-h5-card-root`	可以为 H5 端的卡片组件编写样式
卡片顶部根元素	`.wd-card__header`	可以为卡片组件顶部编写样式
卡片内容根元素	`.wd-card__body`	可以为卡片组件内容编写样式
卡片底部根元素	`.wd-card__footer`	可以为卡片组件底部编写样式

了解样式 API

版本变化

无

卡片

适用场景​

基础能力说明​

示例​

交互式预览​

样式 API 自定义样式​

属性​

事件​

属性 API​

方法 API​

样式 API​

版本变化​