Puck 0.18：下一代 React 視覺化編輯器來了！

準(zhǔn)備好進(jìn)行大規(guī)模升級吧！ Puck 是 React 的開源視覺化編輯器，剛推出 0.18 版本，具有革命性的拖放引擎，具有完整的 CSS 網(wǎng)格和 Flexbox 支援。 這為您的頁面建立器和無程式碼應(yīng)用程式帶來了前所未有的設(shè)計(jì)彈性。

在 GitHub 上給 Puck 一顆星！ ?

此更新消除了先前的限制，允許使用者將任何組件拖放到畫布上的任何位置。 想像一下可能性：

現(xiàn)在，您的使用者幾乎可以創(chuàng)建任何可以想像的設(shè)計(jì)，而無需編寫程式碼。 不再妥協(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ò)展，從簡單的頁面級區(qū)塊到原子組件的高度精細(xì)的可視佈局建構(gòu)器。 建立網(wǎng)站、文件編輯器、資訊圖表設(shè)計(jì)器——如果是使用 React 元件建構(gòu)的，Puck 可以處理。

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

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

更新至 Puck 0.18

更新很簡單！ 對於新項(xiàng)目：

npm install @measured/puck --save

對於現(xiàn)有項(xiàng)目：

npm update @measured/puck

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

自由形式的拖放

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

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

設(shè)定很簡單。在 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>
    );
  },
};

使用者可以透過調(diào)整編輯器欄位來建立複雜的佈局：

這也適用於彈性容器，建立響應(yīng)式佈局：

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

在 DropZone 之間拖曳

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

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

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

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

npm install @measured/puck --save

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

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

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

• 互動(dòng)式熱鍵 (cmd/ctrl i) 用於切換組件互動(dòng)性。
• 操作列中的「選擇父級」操作。
• 從預(yù)設(shè)佈局中刪除了 position: fixed，以便更輕鬆地嵌入應(yīng)用程式。
• 用於操作欄組織的新 <ActionBar.Label> 組件。

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

結(jié)束語

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

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