彻底改变 React 中的拖放操作：推出 Puck 8

Puck 0.18：下一代 React 可视化编辑器来了！

准备好进行大规模升级吧！ Puck 是 React 的开源可视化编辑器，刚刚推出 0.18 版本，具有革命性的拖放引擎，具有完整的 CSS 网格和 Flexbox 支持。 这为您的页面构建器和无代码应用程序带来了前所未有的设计灵活性。

在 GitHub 上给 Puck 一颗星！ ⭐

此更新消除了以前的限制，允许用户将任何组件拖放到画布上的任何位置。 想象一下可能性：

现在，您的用户几乎可以创建任何可以想象到的设计，而无需编写代码。 不再妥协；纯粹的创作自由等待着您！

Puck 0.18 不仅仅是一个改进；更是一个进步。它转变为终极浏览器设计工具。 它的适应性可根据您的特定需求进行扩展，从简单的页面级块到原子组件的高度精细的可视布局构建器。 构建网站、文档编辑器、信息图表设计器——如果是使用 React 组件构建的，Puck 可以处理。

让我们探索一下主要功能：

（有关详细信息，请参阅官方发行说明和变更日志。）

更新至 Puck 0.18

更新很简单！ 对于新项目：

npm install @measured/puck --save

对于现有项目：

npm update @measured/puck

没有重大变化意味着平稳过渡！ ？

自由形式的拖放

新的拖放引擎改变了游戏规则。 以前的版本有局限性，主要是将拖放限制在垂直轴上。虽然 DropZoneAPI 允许多列布局，但手动组件定位很麻烦。

现在，可以向任意方向自由拖放组件。 Puck 提供即时视觉反馈：

设置很简单。在 Puck 配置中将包装器 DropZone 设置为网格或 Flexbox：

  Grid: {
    //... fields configuration
    render: ({ columns }) => (
     <dropzone zone="my-grid"><p>This transforms the DropZone's div into a CSS grid, ensuring automatic alignment.  The same applies to flex containers.</p>

<h3 id="Advanced-CSS-Layouts">Advanced CSS Layouts</h3>

Previously, all Puck components were wrapped in a div, hindering direct descendant treatment within CSS grid or flex layouts.  The new `inline` parameter removes this wrapper, enabling expected behavior for rules like `flex-grow` or `grid-column`.

For example, create a customizable card grid using `grid-column` and `grid-row`:

```javascript
Card: {
  //... fields configuration
  inline: true, // Remove default wrapper
  render: ({ spanRow, spanCol, puck }) => {
    return (
      <div>
      </div>
    );
  },
};

用户可以通过调整编辑器字段来构建复杂的布局：

这也适用于弹性容器，创建响应式布局：

这可以实现更雄心勃勃的布局和互动体验。

在 DropZone 之间拖动

在任何 DropZone 容器之间拖动组件！ 以前，拖动仅限于共享同一父级的区域。 现在，可以在兄弟姐妹、嵌套子级或父级之间无缝移动组件，无需额外设置。

（使用 DropZone 上的 allow 属性进行组件限制。）

动态 DropZone 高度

DropZones 现在可以动态调整其高度以匹配其子级，从而提供准确的渲染预览。 为空 DropZone 配置占位符高度 (minEmptyHeight) 以保持布局一致。

npm install @measured/puck --save

使用网格扩展组件抽屉

由于新的拖放引擎，组件抽屉（侧边栏）现在可以显示为网格。

0.18 中会有更多内容！

• 交互式热键 (cmd/ctrl i) 用于切换组件交互性。
• 操作栏中的“选择父级”操作。
• 从默认布局中删除了 position: fixed，以便更轻松地嵌入应用程序。
• 用于操作栏组织的新 <actionbar.label></actionbar.label> 组件。

探索更新的文档以进行更深入的研究！

结束语

Puck 0.18 是社区的努力。感谢您的反馈和贡献！ 分享您的创作并在 Discord、Bluesky 和 ​​X 上与我们联系。别忘了给我们一个？在 GitHub 上！ 让我们看看您接下来会构建什么！ ？

以上是彻底改变 React 中的拖放操作：推出 Puck 8的详细内容。更多信息请关注PHP中文网其他相关文章！