网站编辑器
容器组件需求文档
编制：吴畏竞
日期：2018-2-25
版本说明
|
版本号 |
编辑者 |
内容 |
|
V1.0 |
吴畏竞 |
创建容器组件需求说明 |
文档说明
该文档为网站编辑器容器组件的说明，包括4种容器组件；
n 自由容器
n 标签容器
n 通栏容器
n 多列容器
该文档会对这四种组件的通用属性及每个的特殊属性进行说明；
功能清单
|
功能点 |
概述 |
备注 |
|
容器组件概述 |
容器组件的整体说明 |
|
|
容器通用属性 |
||
|
容器特殊属性 |
容器组件整体概述
容器组件可在网页种容纳其他组件，多个组件组合成为一个集合，主要功能在于可多个组件共同组合在一起；
容器组件通用属性
一． 组件组成
所有组件均由2个区块构成，标题区，内容区
二． 组件标题区
- 所有容器组件可自由命名，同一个页面下命名不可重复，作为栏位显示名称，可接受字母，数字，文字输入，最多不超过10个字；
- 组件被创建出来时，命名为该组件名称+数字，举例，自由容器1；数字为该组件已使用过的数量+1；
- 组件被初始化创建出来时，标题栏默认为隐藏的，可设置是否显示；
- 组件标题区背景设置，可设置图片，纯色背景
- 标题区文字可修改，字体，颜色，大小；
- 标题区高度可设置，单位px
- 标题区标题位置可设置，居左/居中/居右；
三． 组件内容区
- 组件内容区可添加除容器组件外的其他组件；
- 内容区背景可自定义，可设置图片，纯色背景；
四． 组件边框
- 组件整体边框可设置，是否显示；
- 边框可设置线条样式，宽度，颜色；
五． 组件内边距
- 设置组件的内边距，单位px；可设置上/下/左/右，4个值；
六． 组件的长宽：
- 可自定义模块的高度和宽度，单位px；
- 初始化创建时有默认数值，根据不同组件配置默认高宽，可能出现百分比，px，混合配置，例如高度500px，宽度100%；
七． 组件的圆角：
- 组件的圆角可设置，建议统一用滚动条来设置圆角弧线；
容器组件特殊属性
一． 自由容器
- 自由容器可被其他3种容器组件包裹；
- 自由容器不可被自由容器本身包裹 ；
- 自由容器可包裹除容器组件外的所有组件；
- 自由容器内可添加组件数量理论无限制；
- 当元素组件被其他容器组件包裹时，会自动在元素组件外包裹一层自由容器
- 自由容器内添加的组件，可以任意摆放位置，但超出自由容器大小的部分不显示；
二． 标签容器
- 标签容器不能包裹除了自由容器以外的容器组件；可包裹容器组件意外的所有组件；
- 标签容器内容区分为2块，标签区和标签内容区；
- 可设置横向标签或者竖向标签；
- 标签属性特殊点在于，当鼠标滑动至标签时，标签内容区对应显示该标签下的内容；
- 将其他组件拉入标签组件中时，会产生一个标签，和对应的标签内容区；
- 标签组件可容纳组件数量理论无上限；
- 标签区可自定义高度，单位px；
- 标签区可自定义背景，图片或纯色；
- 标签区中的标签可定义字体，颜色，大小；
- 标签区中的标签项可定义背景，纯色或图片；其中背景有两种状态，选中状态和非选中状态，均可单独定义；
- 标签区中的标签项每个可编辑文字内容；
三． 多列容器
- 多列容器是可以在同一行内并列摆放多个组件；
- 多列容器可以包裹自由容器；不能包裹其他容器组件；
- 多列容器可包裹除容器组件外的所有组件；
- 可设置2/3/4/5组件并列；
- 可单独设置列间距，单位px；
- 其中每列可单独设置宽度；往右边挤压空间，当5列子容器宽度超出父容器宽度时，超出部分不显示；
四． 通栏容器
- 通栏容器是固定在网页上的容器，不能自由摆放，从网页的内容区顶部开始摆放或从网页的内容区底部开始摆放，其他摆放的组件不能影响到通栏组件的位置；
- 多个通栏容器间可以相互调换位置；
- 通栏容器可以包裹除本身外的所有组件；
- 通栏容器可包裹组件数量理论上无限制；
- 通栏容器差速特殊效果：指通栏的背景与网页滚动速度不同而形成的视觉效果；
- 通栏容器轮播效果：通栏背景可设置轮播效果，与横幅轮播效果相同（轮播提示，轮播动画，自动轮播时间的设置）；如设置4页轮播，则出现4个通栏容器，每个可单独设置背景和通栏容器中的组件；