容器组件

 

 

网站编辑器

 

容器组件需求文档

编制：吴畏竞

日期：2018-2-25

版本说明

版本号	编辑者	内容
V1.0	吴畏竞	创建容器组件需求说明

文档说明

该文档为网站编辑器容器组件的说明，包括4种容器组件；

n 自由容器

n 标签容器

n 通栏容器

n 多列容器

该文档会对这四种组件的通用属性及每个的特殊属性进行说明；

功能清单

功能点	概述	备注
容器组件概述	容器组件的整体说明
容器通用属性
容器特殊属性

容器组件整体概述

容器组件可在网页种容纳其他组件，多个组件组合成为一个集合，主要功能在于可多个组件共同组合在一起；

容器组件通用属性

一． 组件组成

所有组件均由2个区块构成，标题区，内容区

二． 组件标题区

1. 所有容器组件可自由命名，同一个页面下命名不可重复，作为栏位显示名称，可接受字母，数字，文字输入，最多不超过10个字；
2. 组件被创建出来时，命名为该组件名称+数字，举例，自由容器1；数字为该组件已使用过的数量+1；
3. 组件被初始化创建出来时，标题栏默认为隐藏的，可设置是否显示；
4. 组件标题区背景设置，可设置图片，纯色背景
5. 标题区文字可修改，字体，颜色，大小；
6. 标题区高度可设置，单位px
7. 标题区标题位置可设置，居左/居中/居右；

三． 组件内容区

1. 组件内容区可添加除容器组件外的其他组件；
2. 内容区背景可自定义，可设置图片，纯色背景；

四． 组件边框

1. 组件整体边框可设置，是否显示；
2. 边框可设置线条样式，宽度，颜色；

五． 组件内边距

1. 设置组件的内边距，单位px；可设置上/下/左/右，4个值；

六． 组件的长宽：

1. 可自定义模块的高度和宽度，单位px；
2. 初始化创建时有默认数值，根据不同组件配置默认高宽，可能出现百分比，px，混合配置，例如高度500px，宽度100%；

七． 组件的圆角：

1. 组件的圆角可设置，建议统一用滚动条来设置圆角弧线；

容器组件特殊属性

一． 自由容器

1. 自由容器可被其他3种容器组件包裹；
2. 自由容器不可被自由容器本身包裹 ；
3. 自由容器可包裹除容器组件外的所有组件；
4. 自由容器内可添加组件数量理论无限制；
5. 当元素组件被其他容器组件包裹时，会自动在元素组件外包裹一层自由容器
6. 自由容器内添加的组件，可以任意摆放位置，但超出自由容器大小的部分不显示；

二． 标签容器

1. 标签容器不能包裹除了自由容器以外的容器组件；可包裹容器组件意外的所有组件；
2. 标签容器内容区分为2块，标签区和标签内容区；
3. 可设置横向标签或者竖向标签；
4. 标签属性特殊点在于，当鼠标滑动至标签时，标签内容区对应显示该标签下的内容；

1. 将其他组件拉入标签组件中时，会产生一个标签，和对应的标签内容区；
2. 标签组件可容纳组件数量理论无上限；
3. 标签区可自定义高度，单位px；
4. 标签区可自定义背景，图片或纯色；
5. 标签区中的标签可定义字体，颜色，大小；
6. 标签区中的标签项可定义背景，纯色或图片；其中背景有两种状态，选中状态和非选中状态，均可单独定义；
7. 标签区中的标签项每个可编辑文字内容；

三． 多列容器

1. 多列容器是可以在同一行内并列摆放多个组件；
2. 多列容器可以包裹自由容器；不能包裹其他容器组件；
3. 多列容器可包裹除容器组件外的所有组件；
4. 可设置2/3/4/5组件并列；
5. 可单独设置列间距，单位px；
6. 其中每列可单独设置宽度；往右边挤压空间，当5列子容器宽度超出父容器宽度时，超出部分不显示；

四． 通栏容器

1. 通栏容器是固定在网页上的容器，不能自由摆放，从网页的内容区顶部开始摆放或从网页的内容区底部开始摆放，其他摆放的组件不能影响到通栏组件的位置；
2. 多个通栏容器间可以相互调换位置；
3. 通栏容器可以包裹除本身外的所有组件；
4. 通栏容器可包裹组件数量理论上无限制；
5. 通栏容器差速特殊效果：指通栏的背景与网页滚动速度不同而形成的视觉效果；
6. 通栏容器轮播效果：通栏背景可设置轮播效果，与横幅轮播效果相同（轮播提示，轮播动画，自动轮播时间的设置）；如设置4页轮播，则出现4个通栏容器，每个可单独设置背景和通栏容器中的组件；