徹底改變 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中文網其他相關文章！