Skip to main content

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
Templatetemplatestring

Example: "card"

Display the top of the cardshowHeaderboolean

Display the top of the card

Default value: true

Display card content by defaultshowContentboolean

Set the default display status. In Event-Component Method

Default value: true

Display the bottom of the cardshowFooterboolean

Display the bottom of the card

Display separatorshowDividerboolean

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
clicktapCompatible with all platforms

-

Card content panel displaycontentShowMobile,PC,Web,Mini Program

-

Card content panel hidecontentHideMobile,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 cardshowHeaderboolean

Display the top of the card

Display card content by defaultshowContentboolean

Set the default display status. In Event-Component Method

Display the bottom of the cardshowFooterboolean

Display the bottom of the card

Display separatorshowDividerboolean

Display separator

Content panel statuscontentStatestring

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 statusdealContentStateobject
  • 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-rootcard 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-rootWrite 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-rootWrite 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-rootWrite 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__headerWrite 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__bodyWrite 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__footerWrite 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--leftWrite 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