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 |
---|
布局模板 | template | string | 布局组件的预设模板 Example: "white" |
头部插槽 | enableHeaderSlot | boolean | Default value: true |
内容插槽 | enableContentSlot | boolean | Default value: true |
Event Description
Property API
NoneMethod API
NoneStyle 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 | 布局组件根元素
|
PC 端布局组件根元素 | .wd-pc-layout-root | 可以为 PC 端的布局组件编写样式
|
H5 端布局组件根元素 | .wd-h5-layout-root | 可以为 H5 端的布局组件编写样式
|
小程序端布局组件根元素 | .wd-mp-layout-root | 可以为小程序端的布局组件编写样式
|
布局顶部元素 | .wd-layout__header | 可以为布局组件顶部编写样式
|
布局内容元素 | .wd-layout__body | 可以为布局组件内容编写样式
|