peppa-editor / 啥是佩奇编辑器

online: http://peppa.dddog.com.cn

新建作品

http://peppa.dddog.com.cn/

访问已保存作品

http://peppa.dddog.com.cn/${作品名}

例如， http://peppa.dddog.com.cn/peppa

页面区域划分

• 预览编辑区
• 元素选择区
• 控制区
• 属性编辑区

操作

新建元素

新建元素，设置默认元素样式，并选中当前所新建元素

切换元素

点击工作区元素切换当前所选元素

层级排序

z-index 拖动改变

编辑元素属性

• name

元素名 - 默认 新建-index 文本输入框

• boder-color

边框颜色 颜色选择器

• boder-style

边框样式 默认实线

• border-width

外边宽

• boder-radius

圆角 input-range 控制器

• border-top-left-radius

• border-top-right-radius

• border-bottom-right-radius

• border-bottom-left-radius

• background-color

背景色 颜色选择器

• width

宽度 数字输入框

• height

高度 数字输入框

• left

左边距离 数字输入框 可拖拽

• top

顶部距离 可拖拽

• transition rotate

旋转角度 默认中心旋转 input-range 控制器

功能

撤销、保存、保存为图片