加入官方微信群

使用微信扫描二维码
或搜索 weweloo 添加微信好友

返回
MooKwai特色块布局容器 / 布局元素

布局容器 / 布局元素

通过调用全局样式的布局变量来实现网站的不同布局形式。

文章目录

特色

布局容器与布局元素区块,结合全局样式的布局变量,实现网站的多种布局形式。布局容器与布局元素两者需结合使用,布局容器与布局元素均可设置媒体背景,支持图像背景与视频背景。

配置选项

布局容器

全局样式

Select 区块对应的全局块样式。

选择布局

Select 选择全局样式中的布局变量。

Html 标签

Select 区块根元素的 Html 标签类型。

布局元素

全局样式

Select 设置区块对应的全局样式。

布局设置

根据父容器所选择的布局变量类型自动调整设置形式,包含弹性布局、列布局、单元格布局,可针对不同设备进行适配

媒体背景

布局容器与布局元素均可设置媒体背景。

使用媒体背景

Boolean 区块根元素是否插入媒体文件作为区块背景。

媒体类型

Select 媒体背景的文件类型,可为图像、视频。

图像文件

File 选择/上传图像文件,支持 jpg / png / gif 等图像或 svg 图形格式文件。

视频文件

File 选择/上传视频文件,支持 mp4 等视频格式文件。

封面图

File 视频封面图片,支持 jpg / png / gif 等图像或 svg 图形格式文件。

自动播放

Boolean 页面加载完成后自动播放视频。

循环播放

Boolean 视频循环播放。

元素

布局容器

<div class="mk-container">
  <div class="mk-row">
    ...内部区块
  </div>
</div>
  • 主容器 .mk-container

布局元素

<div class="mk-column">
  ...内部区块
</div>
  • 主容器 .mk-column

其他

  • 布局容器与布局元素两个区块需结合使用;
  • 布局容器区块内可插入一个或多个布局元素区块;
  • 布局元素区块内可插入其他任何类型区块。

使用微信扫描二维码
或搜索 weweloo 添加微信好友

加微信
进群聊聊(๑•̀ㅂ•́) ✧