跳到主要内容

卡片

WdCard

适用场景​

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

基础能力说明​

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

示例​

交互式预览​

样式 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;
}

属性​

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

属性名
属性标识
类型
说明
模板templatestring

示例："card"

显示卡片顶部showHeaderboolean

显示卡片顶部

默认值：true

默认显示卡片内容showContentboolean

设置默认显示状态。在【事件-组件方法】中调用卡片内容的显示/隐藏方法，可动态控制内容面板显隐。查看指引

默认值：true

显示卡片底部showFooterboolean

显示卡片底部

显示分割线showDividerboolean

显示分割线

默认值：true

示例：false

事件​

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

事件名
事件code
事件出参 event.detail
适用情况
说明
点击tap兼容三端

-

卡片内容面板显示时contentShow移动端,PC端,WEB端,小程序

-

卡片内容面板隐藏时contentHide移动端,PC端,WEB端,小程序

-

属性 API​

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

只读属性名
属性标识
类型
说明
显示卡片顶部showHeaderboolean

显示卡片顶部

默认显示卡片内容showContentboolean

设置默认显示状态。在【事件-组件方法】中调用卡片内容的显示/隐藏方法，可动态控制内容面板显隐。查看指引

显示卡片底部showFooterboolean

显示卡片底部

显示分割线showDividerboolean

显示分割线

内容面板状态contentStatestring

方法 API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
设置内容面板状态dealContentStateobject
  • state: string内容面板状态 可选值：显示(show) 隐藏(hide)

设置内容面板的显示与隐藏状态

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-card-root卡片组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-card-root {
  /* 在这里编写CSS 样式 */
}
PC 端卡片组件根元素.wd-pc-card-root可以为 PC 端的卡片组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-card-root {
  /* 在这里编写CSS 样式 */
}
H5 端卡片组件根元素.wd-h5-card-root可以为 H5 端的卡片组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-card-root {
  /* 在这里编写CSS 样式 */
}
小程序端卡片组件根元素.wd-mp-card-root可以为小程序端的卡片组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-card-root {
  /* 在这里编写CSS 样式 */
}
卡片顶部元素.wd-card__header可以为卡片组件顶部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-card__header {
  /* 在这里编写CSS 样式 */
}
卡片内容元素.wd-card__body可以为卡片组件内容编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-card__body {
  /* 在这里编写CSS 样式 */
}
卡片底部元素.wd-card__footer可以为卡片组件底部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-card__footer {
  /* 在这里编写CSS 样式 */
}
折叠面板场景下卡片顶部左侧图标元素.wd-card-icon-fold--left可以为卡片组件底部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-card-icon-fold--left {
  /* 在这里编写CSS 样式 */
}

了解样式 API

版本变化​

无