https://github.com/0123cf/layout-ui

可视化布局 纯css布局 Layout-UI
https://github.com/0123cf/layout-ui

Last synced: 21 days ago
JSON representation

可视化布局 纯css布局 Layout-UI

• Host: GitHub
• URL: https://github.com/0123cf/layout-ui
• Owner: 0123cf
• License: other
• Created: 2019-04-14T14:11:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-06-06T06:55:16.000Z (over 5 years ago)
• Last Synced: 2024-08-05T17:43:30.972Z (4 months ago)
• Language: TypeScript
• Homepage: http://layoutui.pro/
• Size: 1.5 MB
• Stars: 265
• Watchers: 15
• Forks: 44
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-hacking-lists - 0123cf/layout-ui - 可视化布局 纯css布局 Layout-UI (TypeScript)

README

        
# layout-ui



    

        

    



可视化布局工具、数据本地操作可视化布局

在线可视化布局工具, 支持相对布局\ 绝对布局\ 弹性布局, 自适应可视化布局. 适用于专业人员开发专业界面, 适用于经过简单培训设计师使用.

纯css可视化布局，生产可阅读二次修改的代码


-----

### USE

![ezMBaidu.gif](https://i.loli.net/2019/05/27/5ceb92c05ab0260521.gif)

### Q&A

问：

width height 如何自适应(设置的容器如何根据内容进行自适应) 


答：

双击 **width** 、 **height**



问：如何查看代码 


答：点击下边栏右侧的箭头即可预览和代码复制



问：如何嵌套布局 


答：点击中间要添加的元素，再点击左侧工具栏选择要添加的布局



问：嵌套布局如何上下并排 


答：点击中间要添加的元素，再点击左侧工具栏选择要添加的布局，即可按顺序布局




问：如何删除元素？ 


答：先选择要删除的元素，再点击del键。或者右击要选择的元素，点击操作菜单。菜单还有增加左右节点等功能哦




问：如何选中上级元素？ 


答：如果已经选中了一个元素，这时候点击按键上⬆️




问：如何自定义插入个数 


答：可以用按键组合调节插入布局数量的方式，先按住要插入的数量，然后再点击，默认是3


-----

|TODO LIST:|

|:--------:|

|添加默认控件|

|针对控件进行样式处理|

|鼠标按住左键拖动修改大小布局|

|背景页面设置样式|

|完善布局方式|

|页面发布到临时服务器预览|

|border|

|转rem|

|搜索布局|

|使用教程编写|

|案例编写|

|国际化（readme；text）|

[在线体验](http://layoutui.pro/#/index)