ngx-workspace Angular自定义可拖动模块/组件大小和位置

经历了一个月项目升级,从angularjs1.4升级到angular6,决定把项目中的一个功能独立出来。以前在npm上搜索关于拖拽的功能仅仅局限于从一个区域拖放到另外一个区域,针对responsive的自定义拖拽页面组件一个都没找着,因而决定本身手动造轮子了。git

什么是 ngx-workspace?angularjs

它基于12栅格设计风格将页面划分为十二列,一个单位面积等于每一栅格中同等大小的正方形。开发者可导入自定义的组件并自定义组件大小和组件在页面中的位置。用户能够启用编辑模式自定义组件大小和位置并保存。github

和其余拖拽组件的不一样npm

目前我在npm上找到的拖拽组件功能都属于列表形式,将一个元素从一个表中拖放到另外一个表中,或者改变元素排列顺序。ngx-workspace的定义与这些组件不一样,它集成化管理页面中不一样区域,能够让用户自定义页面中每一个区域和大小,而且能够让用户保存更改,使一个页面具备高度可定制性。spa

ngx-workspace有什么特色设计

整个workspace能够设定为自适应页面或者固定大小,组件大小会随着自适应模式变化。图片

例子开发

自定义拖动组件
图片描述get

改变组件模块大小和位置
图片描述it

还有自适应模式和固定位置,能够在Demo中尝试

项目Github: https://github.com/donle/ngx-...

相关文章
相关标签/搜索