资讯专栏INFORMATION COLUMN

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

Integ / 1226人阅读

摘要:用户可以启用编辑模式自定义组件大小和位置并保存。例子自定义拖动组件改变组件模块大小和位置还有自适应模式和固定位置,可以在中尝试项目

经历了一个月项目升级,从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

相关文章

  • SpreadJS 纯前端表格控件 V12.2 发布更新

    摘要:用不到行代码,在前端实现的全部功能千万前端开发者翘首企盼,终发布更新六大功能特性,带来更多便利,用不到行代码,在前端实现的全部功能是一款基于的纯前端电子表格控件,以高速低耗高度类似可无限扩展为产品特色,提供移动跨平台和浏览器支持,同时满足等 用不到100行代码,在前端实现Excel的全部功能 千万前端开发者翘首企盼,SpreadJS V12.2 终发布更新:六大功能特性,带来更多便利,...

    FrozenMap 评论0 收藏0
  • echarts使用总结

    摘要:最近一段时间做了一个使用的图表项目。由于理解能力有限,使用起来并非畅通无阻。所谓好记性不如烂笔头,现将一些比较关键的点记录一下,供后续查看。 最近一段时间做了一个使用echarts的图表项目。由于理解API能力有限,使用起来并非畅通无阻。所谓好记性不如烂笔头,现将一些比较关键的点记录一下,供后续查看。 一 使用方法 项目:ionic+angular4+echarts 1.由于打包原因,...

    spademan 评论0 收藏0
  • AngularJs

    摘要:当左右服务都被解析并返回时,会以服务为参数去调用组件的构造函数。发送或广播的消息应该限定在最小的作用域。置顶一个通过,发送的消息列表并且窒息的管理以防止命名冲突在需要格式化数据时,将格式 angular 数据双向绑定的框架 提供数据绑定,DOM指令。angular,定义了一套规则,开发中就必须遵守规则,这套规则为项目提供了一套解决方案。 模块,组件,模板,元数据,数据绑定, 指令,服务...

    sf190404 评论0 收藏0
  • web前端学习方案

    摘要:学习计划认识语义化的意义。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。熟悉,理解响应式编程思想在根据官方文档学习的时候请优先理解它的思想。 学习计划 HTML5 认识HTML5语义化的意义。 熟悉HTML5新特性 了解如何快速的加载HTML页面,以及完善用户体验如:阅读模式、无障碍设置, 了解Canvas、Svg CS...

    imccl 评论0 收藏0
  • web前端学习方案

    摘要:学习计划认识语义化的意义。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。熟悉,理解响应式编程思想在根据官方文档学习的时候请优先理解它的思想。 学习计划 HTML5 认识HTML5语义化的意义。 熟悉HTML5新特性 了解如何快速的加载HTML页面,以及完善用户体验如:阅读模式、无障碍设置, 了解Canvas、Svg CS...

    mylxsw 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<