Skip to main content
Supported Regions:上海

Layout Component

WdLayout

Applicable Scenarios​

Used for building page layouts with top navigation.

Basic Features

Usage Instructions​

The top of the component is divided into left and right slots. The left slot can hold components such as buttons and titles, the right slot can hold components such as links, and the middle content slot area can accommodate other components for building page content.

Property Description​

External properties received by the component

Property Name
Property Identifier
Type
Description
布局模板templatestring

布局组件的预设模板

Example: "white"

头部插槽enableHeaderSlotboolean

Default value: true

内容插槽enableContentSlotboolean

Default value: true

Event Description​

Property API​

None

Method API​

None

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
根元素.wd-layout-root布局组件根元素
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-layout-root {
  /* Write CSS styles here */
}
PC 端布局组件根元素.wd-pc-layout-root可以为 PC 端的布局组件编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-pc-layout-root {
  /* Write CSS styles here */
}
H5 端布局组件根元素.wd-h5-layout-root可以为 H5 端的布局组件编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-h5-layout-root {
  /* Write CSS styles here */
}
小程序端布局组件根元素.wd-mp-layout-root可以为小程序端的布局组件编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope.wd-mp-layout-root {
  /* Write CSS styles here */
}
布局顶部元素.wd-layout__header可以为布局组件顶部编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-layout__header {
  /* Write CSS styles here */
}
布局内容元素.wd-layout__body可以为布局组件内容编写样式
/* :scope refers to the current component element */
/* For details, refer to the Style API documentation */
:scope .wd-layout__body {
  /* Write CSS styles here */
}

Learn about Style API