Skip to main content

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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
布局模板templatestring

布局组件的预设模板

示例："white"

头部插槽enableHeaderSlotboolean

默认值：true

内容插槽enableContentSlotboolean

默认值：true

Event Description​

Property API​

无

Method API​

无

Style API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

名称
类名
说明和示例
根元素.wd-layout-root布局组件根元素
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-layout-root {
  /* 在这里编写CSS 样式 */
}
PC 端布局组件根元素.wd-pc-layout-root可以为 PC 端的布局组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-pc-layout-root {
  /* 在这里编写CSS 样式 */
}
H5 端布局组件根元素.wd-h5-layout-root可以为 H5 端的布局组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-h5-layout-root {
  /* 在这里编写CSS 样式 */
}
小程序端布局组件根元素.wd-mp-layout-root可以为小程序端的布局组件编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope.wd-mp-layout-root {
  /* 在这里编写CSS 样式 */
}
布局顶部元素.wd-layout__header可以为布局组件顶部编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-layout__header {
  /* 在这里编写CSS 样式 */
}
布局内容元素.wd-layout__body可以为布局组件内容编写样式
/* :scope 指的是当前组件元素 */
/* 具体可参考样式 API 文档 */
:scope .wd-layout__body {
  /* 在这里编写CSS 样式 */
}

了解样式 API