彻底改变 React 中的拖放功能：Puck 0.18 介绍- 大数跨境

首页

彻底改变 React 中的拖放功能：Puck 0.18 介绍

索引目录

2025-01-23

Puck 0.18现已发布！

此次更新标志着我们迈出了一大步，推出了支持 CSS Grid 和 Flexbox 的突破性拖放引擎。这消除了之前的所有限制，并带来了无与伦比的灵活性，因此您的用户可以将任何组件拖放到任何地方。

我这样说是什么意思呢？你自己看吧：

动态图片

这意味着您的页面构建器现在可以支持用户构想的几乎任何设计— 无需编写任何代码。不再需要妥协或变通 — 只有纯粹的创作自由。

但这一里程碑不仅仅改进了 Puck，它还通过增加可扩展到您所需的粒度级别的灵活性，将其转变为终极的浏览器设计工具。

无论您想要一个带有页面级块的简单页面构建器，还是一个用于较小原子组件的高度精细的可视化布局构建器，Puck 都能满足您的需求。从网站到文档编辑器再到信息图表设计器 — 如果它是使用 React 组件构建的，Puck 现在就可以将其变为现实。

让我们仔细了解 Puck 0.18 中的主要功能以及如何开始使用它们。

更新至新版本

在深入研究之前，我们先让您快速上手。使用最新版本的 Puck 非常快捷、简单。

如果您要开始一个新项目，只需使用您最喜欢的包管理器进行安装：

npm install @measured/puck --save

或者，如果您已经在使用 Puck，则可以通过运行以下命令在现有项目中更新它：

npm update @measured/puck

就这样！由于此更新不会引入任何重大更改，您可以直接探索所有新功能，而不必担心兼容性问题。

️ 自由形式的多维拖放

新的拖放引擎彻底改变了用户和开发人员的体验。

以前，Puck 的拖放功能主要局限于垂直轴，可以使用DropZoneAPI 进行扩展以创建多列布局。然而，这对用户来说可能很麻烦，因为它需要手动定位每列中的组件，而且如果您想增加列数并重新排列项目，则必须手动重新组织它们：

动态图片

随着 0.18 版本的发布，您现在可以自由地将 React 组件拖放到画布上的任何方向 - 垂直、水平或在响应式网格内。Puck 还会为您提供即时的视觉反馈，准确显示放置组件后的布局：

动态图片

“好吧，这听起来很棒，但我该如何设置呢？”这是最好的部分——它非常简单。您需要做的就是在 Puck中将包装器设置DropZone为网格或弹性框config：

Grid: {
    //... fields configuration
    render: ({ columns }) => (
     <DropZone
       zone="my-grid"
       style={{
         display: "grid",
         gridTemplateColumns: `repeat(${columns}, 1fr)`,
       }}
     />
    ),
  },

就是这样 — 这会将DropZone的 div 变成 CSS 网格，确保您在其中拖放的任何组件都会自动与网格流对齐。同样的方法也适用于弹性容器。

高级 CSS 布局

以前，所有 Puck 组件都包裹在中div。这使得无法将项目视为其父级的直接后代DropZone，而这在使用 CSS 网格或基于弹性的布局时可能是必要的。

使用新f="https://puckeditor.com/docs/api-reference/configuration/component-config#inline">inline参数，您可以完全移除 Puck 包装器并将子项视为的直接后代DropZone。这对于构建布局非常有用，因为规则flex-grow或grid-column行为完全符合您的预期。

例如，假设您想要创建一个卡片网格，用户可以使用grid-column和grid-rowCSS 规则自定义每张卡片跨越的行数和列数 - 您需要做的就是像这样配置您的组件：

Card: {
  //... fields configuration
  // Enable inline mode to remove default wrapper div
  inline: true,
  render: ({ spanRow, spanCol, puck }) => {
    return (
      <div
        style={{
          border: "1px solid black",
          gridColumn: `span ${spanCol}`,
          gridRow: `span ${spanRow}`,
        }}
        // Pass the drag reference to the new draggable div
        ref={puck.dragRef}
      >
        Card Content
      </div>
    );
  },
},
Grid: {
  //... fields configuration
  render: ({ columns, rows }) => (
    <DropZone
      zone="my-grid"
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gridTemplateRows: `repeat(${rows}, 1fr)`,
      }}
    />
  ),
},

这样，您的用户只需在编辑器中调整几个字段即可构建复杂的多列布局：

动态图片

这也适用于弹性容器和项目。例如，您可以创建一个弹性容器，根据视口大小和项目的规则响应地包装和缩放项目flex：

动态图片

这只是冰山一角。通过抛弃包装器并让开发人员直接控制组件，Puck 现在为更具雄心的布局、更具互动性的体验以及全新类型的项目打开了大门。

在 DropZones 容器之间拖动

此版本中最令人兴奋的升级之一是在容器之间拖动组件的功能DropZones。

以前，您只能在共享同一父级的区域之间进行拖放，说实话，这感觉非常有限。如果您的用户需要将某个内容移动到层次结构中的另一个级别，他们必须完全复制、粘贴或重新输入数据。现在，所有这些麻烦都消失了。无论您是DropZone在同级区域之间移动组件或整个区域，将其拖入嵌套子级，还是将其拉回父级，它都可以正常工作 -您无需进行额外设置。

这一变化简化了整个体验。现在，移动组件变得直观且无缝。例如，如果您正在构建带有嵌套小部件的仪表板，您现在可以一次性重新排列所有内容 - 将图表、控件或标题拖到布局的任何级别：

动态图片

专业提示：如果您需要保留一些限制，您可以使用allowprop 来DropZone控制它接受哪些组件。

动态 DropZone 高度

DropZones 也获得了重大的质量更新：它们现在可以动态缩小以匹配其子项的高度并准确预览最终渲染。

更棒的是，您现在可以为空的 DropZone 配置占位符高度。这样您就可以定义它们在里面没有任何内容时的行为，让您完全控制编辑器的布局，并允许您根据需要在视觉上优先考虑 DropZone。

要做到这一点，你需要做的就是minEmptyHeight在你的中设置 prop DropZone。例如，你可能想在画布顶部显示一个短导航栏 DropZone，同时保持主内容 DropZone 尽可能高。在 0.18 中，你现在可以通过如下配置来做到这一点root：

root: {
  render: () => (
    <div>
      <DropZone
        zone="nav"
        // Set the height to 80 pixels when nothing is inside
        minEmptyHeight={80}
        style={{ maxHeight: 100 }}
      />
      <DropZone
        zone="main"
        // Set the height to 500 pixels when nothing is inside
        minEmptyHeight={500}
      />
    </div>
  ),
},