Puck 0.18：下一代 React 可視化編輯器來(lái)了！

準(zhǔn)備好進(jìn)行大規(guī)模升級(jí)吧！ Puck 是 React 的開(kāi)源可視化編輯器，剛剛推出 0.18 版本，具有革命性的拖放引擎，具有完整的 CSS 網(wǎng)格和 Flexbox 支持。 這為您的頁(yè)面構(gòu)建器和無(wú)代碼應(yīng)用程序帶來(lái)了前所未有的設(shè)計(jì)靈活性。

在 GitHub 上給 Puck 一顆星！ ?

此更新消除了以前的限制，允許用戶(hù)將任何組件拖放到畫(huà)布上的任何位置。 想象一下可能性：

現(xiàn)在，您的用戶(hù)幾乎可以創(chuàng)建任何可以想象到的設(shè)計(jì)，而無(wú)需編寫(xiě)代碼。 不再妥協(xié)；純粹的創(chuàng)作自由等待著您！

Puck 0.18 不僅僅是一個(gè)改進(jìn)；更是一個(gè)進(jìn)步。它轉(zhuǎn)變?yōu)榻K極瀏覽器設(shè)計(jì)工具。 它的適應(yīng)性可根據(jù)您的特定需求進(jìn)行擴(kuò)展，從簡(jiǎn)單的頁(yè)面級(jí)塊到原子組件的高度精細(xì)的可視布局構(gòu)建器。 構(gòu)建網(wǎng)站、文檔編輯器、信息圖表設(shè)計(jì)器——如果是使用 React 組件構(gòu)建的，Puck 可以處理。

讓我們探索一下主要功能：

（有關(guān)詳細(xì)信息，請(qǐng)參閱官方發(fā)行說(shuō)明和變更日志。）

更新至 Puck 0.18

更新很簡(jiǎn)單！ 對(duì)于新項(xiàng)目：

npm install @measured/puck --save

對(duì)于現(xiàn)有項(xiàng)目：

npm update @measured/puck

沒(méi)有重大變化意味著平穩(wěn)過(guò)渡！ ？

自由形式的拖放

新的拖放引擎改變了游戲規(guī)則。 以前的版本有局限性，主要是將拖放限制在垂直軸上。雖然 DropZoneAPI 允許多列布局，但手動(dòng)組件定位很麻煩。

現(xiàn)在，可以向任意方向自由拖放組件。 Puck 提供即時(shí)視覺(jué)反饋：

設(shè)置很簡(jiǎn)單。在 Puck 配置中將包裝器 DropZone 設(shè)置為網(wǎng)格或 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>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>
    );
  },
};

用戶(hù)可以通過(guò)調(diào)整編輯器字段來(lái)構(gòu)建復(fù)雜的布局：

這也適用于彈性容器，創(chuàng)建響應(yīng)式布局：

這可以實(shí)現(xiàn)更雄心勃勃的布局和互動(dòng)體驗(yàn)。

在 DropZone 之間拖動(dòng)

在任何 DropZone 容器之間拖動(dòng)組件！ 以前，拖動(dòng)僅限于共享同一父級(jí)的區(qū)域。 現(xiàn)在，可以在兄弟姐妹、嵌套子級(jí)或父級(jí)之間無(wú)縫移動(dòng)組件，無(wú)需額外設(shè)置。

（使用 DropZone 上的 allow 屬性進(jìn)行組件限制。）

動(dòng)態(tài) DropZone 高度

DropZones 現(xiàn)在可以動(dòng)態(tài)調(diào)整其高度以匹配其子級(jí)，從而提供準(zhǔn)確的渲染預(yù)覽。 為空 DropZone 配置占位符高度 (minEmptyHeight) 以保持布局一致。

npm install @measured/puck --save

使用網(wǎng)格擴(kuò)展組件抽屜

由于新的拖放引擎，組件抽屜（側(cè)邊欄）現(xiàn)在可以顯示為網(wǎng)格。

0.18 中會(huì)有更多內(nèi)容！

• 交互式熱鍵 (cmd/ctrl i) 用于切換組件交互性。
• 操作欄中的“選擇父級(jí)”操作。
• 從默認(rèn)布局中刪除了 position: fixed，以便更輕松地嵌入應(yīng)用程序。
• 用于操作欄組織的新 <ActionBar.Label> 組件。

探索更新的文檔以進(jìn)行更深入的研究！

結(jié)束語(yǔ)

Puck 0.18 是社區(qū)的努力。感謝您的反饋和貢獻(xiàn)！ 分享您的創(chuàng)作并在 Discord、Bluesky 和 ??X 上與我們聯(lián)系。別忘了給我們一個(gè)？在 GitHub 上！ 讓我們看看您接下來(lái)會(huì)構(gòu)建什么！ ？

以上是徹底改變 React 中的拖放操作：推出 Puck 8的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！