Card

WdCard

Applicable Scenarios

Card container, capable of holding text, buttons, images, etc.

Basic Capabilities Description

1. The basic properties of the card allow configuration of the visibility for the card header, card content, and card footer.
2. The advanced properties of the card allow configuration of the divider line visibility.

Example

Interactive Preview

Style API Custom Styles

/* Modify header styles, background color, padding, and alignment */
.wd-card-root .wd-card__header {
  background-color: #e8e8e8;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}
/* Modify content styles, background color, padding, and alignment */
.wd-card-root .wd-card__body {
  background-color: #f0f0f0;
  padding: 15px;
  display: flex;
  justify-content: center;
}
/* Modify footer styles, background color, padding, and alignment */
.wd-card-root .wd-card__footer {
  background-color: #f9f9f9;
  padding: 20px;
  display: flex;
  justify-content: start;
}

Properties

External properties received by the component

Property Name	Property Identifier	Type	Description

Template	template	string	Example: "card"
Display the top of the card	showHeader	boolean	Display the top of the card Default value: true
Display card content by default	showContent	boolean	Set the default display status. In Event-Component Method Default value: true
Display the bottom of the card	showFooter	boolean	Display the bottom of the card
Display separator	showDivider	boolean	Display separator Default value: true Example: false

Events

Events exposed by the component. You can listen to component events to trigger external actions

Event Name	Event Code	Event Output Parameters event.detail	Applicable Scenarios	Description

click	tap		Compatible with all platforms	-
Card content panel display	contentShow		Mobile,PC,Web,Mini Program	-
Card content panel hide	contentHide		Mobile,PC,Web,Mini Program	-

Property API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name	Property Identifier	Type	Description

Display the top of the card	showHeader	boolean	Display the top of the card
Display card content by default	showContent	boolean	Set the default display status. In Event-Component Method
Display the bottom of the card	showFooter	boolean	Display the bottom of the card
Display separator	showDivider	boolean	Display separator
Content panel status	contentState	string

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name	Method Identifier	Parameters	Method Description

Set Content panel status

dealContentState

object state: string内容面板状态 Optional values:显示(show) 隐藏(hide)

Set Content panel display and hidden state

Style API

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name	Class Name	Description and Examples

root element	.wd-card-root	card component root element /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-card-root { /* Write CSS styles here */ }
PC-side card component root element	.wd-pc-card-root	Write styles for the card component on PC /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-pc-card-root { /* Write CSS styles here */ }
H5 card component root element	.wd-h5-card-root	Write styles for the card component on H5 /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-h5-card-root { /* Write CSS styles here */ }
WeChat Mini Program card component root element	.wd-mp-card-root	Write styles for the card component on WeChat Mini Program /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-mp-card-root { /* Write CSS styles here */ }
Element at the top of the card	.wd-card__header	Write styles for the top of the card component /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope .wd-card__header { /* Write CSS styles here */ }
Card content element	.wd-card__body	Write styles for card component content /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope .wd-card__body { /* Write CSS styles here */ }
Element at the bottom of the card	.wd-card__footer	Write styles for the bottom of the card component /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope .wd-card__footer { /* Write CSS styles here */ }
Collapsible panel card top left icon element in the scenario	.wd-card-icon-fold--left	Write styles for the bottom of the card component /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope .wd-card-icon-fold--left { /* Write CSS styles here */ }

Learn about Style API

Version Changes

None