跳到主要内容

布局组件

WdLayout

适用场景​

用于构建带有顶部导航的页面布局

基本功能

使用说明​

组件顶部分为左右两侧插槽，左侧插槽可放入按钮、标题等组件，右侧插槽可放入链接等组件，中间内容插槽区域中可放入其他组件用于构建页面内容

属性说明​

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

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

布局组件的预设模板

默认值："white"

示例："white"

事件说明​

属性 API​

无

方法 API​

无

样式 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