Card
WdCard
Applicable Scenarios
Card container, capable of holding text, buttons, images, etc.
Basic Capabilities Description
- The basic properties of the card allow configuration of the visibility for the card header, card content, and card footer.
- 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
 | 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  | 
| PC-side card component root element | .wd-pc-card-root | Write styles for the card component on PC  | 
| H5 card component root element | .wd-h5-card-root | Write styles for the card component on H5  | 
| WeChat Mini Program card component root element | .wd-mp-card-root | Write styles for the card component on WeChat Mini Program  | 
| Element at the top of the card | .wd-card__header | Write styles for the top of the card component  | 
| Card content element | .wd-card__body | Write styles for card component content  | 
| Element at the bottom of the card | .wd-card__footer | Write styles for the bottom of the card component  | 
| Collapsible panel card top left icon element in the scenario | .wd-card-icon-fold--left | Write styles for the bottom of the card component  | 
Version Changes
None