摘要:用户可以启用编辑模式自定义组件大小和位置并保存。例子自定义拖动组件改变组件模块大小和位置还有自适应模式和固定位置,可以在中尝试项目
经历了一个月项目升级,从angularjs1.4升级到angular6,决定把项目中的一个功能独立出来。之前在npm上搜索关于拖拽的功能仅仅局限于从一个区域拖放到另一个区域,针对responsive的自定义拖拽页面组件一个都没找着,于是决定自己手动造轮子了。
什么是 ngx-workspace?
它基于12栅格设计风格将页面划分为十二列,一个单位面积等于每一栅格中同等大小的正方形。开发者可导入自定义的组件并自定义组件大小和组件在页面中的位置。用户可以启用编辑模式自定义组件大小和位置并保存。
和其他拖拽组件的不同
目前我在npm上找到的拖拽组件功能都属于列表形式,将一个元素从一个表中拖放到另一个表中,或者改变元素排列顺序。ngx-workspace的定义与这些组件不同,它集成化管理页面中不同区域,可以让用户自定义页面中每个区域和大小,并且可以让用户保存更改,使一个页面具有高度可定制性。
ngx-workspace有什么特点
整个workspace可以设定为自适应页面或者固定大小,组件大小会随着自适应模式变化。
例子
自定义拖动组件
改变组件模块大小和位置
还有自适应模式和固定位置,可以在Demo中尝试
项目Github: https://github.com/donle/ngx-...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95286.html
摘要:用不到行代码,在前端实现的全部功能千万前端开发者翘首企盼,终发布更新六大功能特性,带来更多便利,用不到行代码,在前端实现的全部功能是一款基于的纯前端电子表格控件,以高速低耗高度类似可无限扩展为产品特色,提供移动跨平台和浏览器支持,同时满足等 用不到100行代码,在前端实现Excel的全部功能 千万前端开发者翘首企盼,SpreadJS V12.2 终发布更新:六大功能特性,带来更多便利,...
摘要:最近一段时间做了一个使用的图表项目。由于理解能力有限,使用起来并非畅通无阻。所谓好记性不如烂笔头,现将一些比较关键的点记录一下,供后续查看。 最近一段时间做了一个使用echarts的图表项目。由于理解API能力有限,使用起来并非畅通无阻。所谓好记性不如烂笔头,现将一些比较关键的点记录一下,供后续查看。 一 使用方法 项目:ionic+angular4+echarts 1.由于打包原因,...
阅读 3796·2021-10-08 10:12
阅读 4036·2021-09-02 15:40
阅读 896·2021-09-01 11:09
阅读 1584·2021-08-31 09:38
阅读 2525·2019-08-30 13:54
阅读 2232·2019-08-30 12:54
阅读 1213·2019-08-30 11:18
阅读 1372·2019-08-29 14:06