Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

组件

直接拖动使用，每个组件对应生成html标签、CSS样式代码

Tip

div、span、img、icon、nav、search、loop、tab、custom 是对应生成的html标签

普通组件

img_19.png

容器 div

容器组件是页面布局的核心元素，用于对页面进行结构化划分，便于实现灵活的页面排版与响应式设计。

  • 下面以铭软官网头部为示例，每个红框可视为一个容器，从而完成初步布局

img_20.png

  • 在设计器中图层结构示例

img_21.png

Tip

也可以用容器组件设置一定高度宽度，可以达到间隔其他组件的效果。

文本 span

  1. 单击选中文本图层，右侧可以修改整个文本的样式，如：字体，背景、边框、间距等。在输入框可修改文本的内容。

img_22.png

  1. 在数据中配置链接地址，可将文本转换为超链接

Tip

文本设置超出省略，不需要设置高度，宽度按需设置。

图片 img

  1. 图片一般设置固定宽度，高度采用自适应
  2. 上传的图片的宽高尺寸比例一定要根据实际显示区域适配

图标 i

基于iconfont图标库，可快速实现图标的展示。

高级组件

导航 nav

显示栏目属性为导航的栏目，可设置导航菜单交互效果

img_28.png

搜索设置圆角效果的时候需要在 输入框 和 按钮 图层设置

img_51.png

img_52.png

轮播图 swiper

  • 数据配置为栏目 文章 轮播项也会同步相同的数据配置，与循环组件类似；

img_40.png

img_41.png

  • 数据配置为静态：不同轮播图可以设置不同的背景；

img_42.png

循环 loop

  • 数据配置为栏目 文章可以实现文章列表、栏目列表，每个循环项的样式与绑定的数据都是相同的。

img_57.png

img_56.png

  • 数据配置为静态情况下，循环项里的文本或图片的链接地址可以独立设置

img_53.png

  • 开启列表对齐，循环项的宽度由循环的宽度和单行数量决定，与循环项本身的宽度无关。

img_54.png

  • 关闭列表对齐不会清空边距，按需手动去除

img_55.png

Tip

循环项里面的元素只能从左侧组件列表拖入

禁止嵌套循环组件、轮播组件、导航组件、搜索组件、标签组件

循环项里面的每个元素的样式都会增加当前循环体的样式名称，避免多个循环项样式冲突，格式如：#w-loop-1770693115000_15 > .ms-loop .ms-loop-item

标签 tab

实现选项卡的效果，通过配置来设置标签组件的样式

img_58.png

自定义组件

基础组件

可以设计器手动转化的组件，达到复用组件的效果，

img_59.png

唯一 样式生成，同步组件里面所有子元素的 父层级样式(高级组件里的元素不会同步)

img_60.png

Tip

只有最外层是容器才能转组件,也只有一个最外层容器才有唯一配置 组件默认不开启唯一id；

模版组件

如导航 搜索组件，将元素先转化为基础组件，在基础组件的json结构基础上新增模版、样式配置

  • 组件type=custom，需要写freemarker模板才可以正常使用

  • 图层结构不可调整，只能设置数据或样式

  • 不能嵌套其他组件

  • 样式配置,样式配置的优先级高于基础样式设置，如鼠标悬停样式效果

    • 在组件最外层级加上
    "options":{"config":{}},
    • 样式配置路径说明：顶级层级样式名 + 顶层样式名 + 配置的css选择器；

    img_61.png

    img_65.png

  • 组件freemarker模板

    • 在模板文本最外层加上自定义组件标识
    <div id="w-id-${component.id}-${component.key}"/  style="display:contents;"> 模板代码 </div>
    • 模板代码如果涉及具体标签逻辑，需要在最外层加上<#noparse></#noparse>，防止被提前解析

    img_62.png

  • 组件样式扩展

    • 一般规定组件样式在组件最顶层写，在设置组件样式时，需在最外层加{id}样式名，例如：{id} .txt:hover {} ;

    • 在custom组件的{id}会替换成 w-id-${component.id}-${component.key} + 当前组件样式名称；

      img_63.png

      img_64.png

    • 如果不需要展示数据配置，删除data 配置

      img_66.png

分页

分页只能在列表页使用，一个列表分页只能开启一次