DEV Community
·
Puck 0.18：全新拖放引擎
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
Puck是一个开源的React可视化编辑器，最新版本0.18引入了强大的拖放引擎，支持CSS网格和弹性布局，新增动态DropZone高度、父选择器和交互热键，提升了页面构建体验。
🎯
关键要点
- Puck是一个开源的React可视化编辑器，最新版本为0.18。
- 新版本引入了强大的拖放引擎，支持CSS网格和弹性布局。
- 动态DropZone高度可以根据子元素的高度自动调整。
- 新增的交互热键cmd+i可以在预览模式下使组件变得互动。
- 新增父选择器功能，可以快速选择组件的父元素。
- 移除了默认布局中的position: fixed样式，方便嵌入应用。
- 新增ActionBar.Label组件，可以在操作栏中创建标签区域。
- 新拖放引擎支持多维拖放，提升页面构建体验。
- 支持在嵌套的DropZones之间拖动，解决了之前的限制。
- 可以通过minEmptyHeight属性控制空DropZone的最小高度。
❓
延伸问答
Puck 0.18的新拖放引擎有什么特点？
Puck 0.18的新拖放引擎支持多维拖放，兼容CSS网格和弹性布局，提升了页面构建体验。
如何使用Puck 0.18的动态DropZone高度功能？
动态DropZone高度会根据子元素的高度自动调整，且可以设置空DropZone的最小高度。
Puck 0.18中新增的交互热键是什么？
新增的交互热键是cmd+i，可以在预览模式下使组件变得互动。
Puck 0.18如何快速选择组件的父元素？
可以通过新增的父选择器功能，直接从操作栏快速选择组件的父元素。
Puck 0.18中移除了什么样的默认布局样式？
移除了默认布局中的position: fixed样式，以便更容易嵌入应用。
Puck 0.18中新增的ActionBar.Label组件有什么用？
ActionBar.Label组件可以在操作栏中创建标签区域，帮助组织操作。
➡️
