Puck 0.18: 次世代の React ビジュアル エディターが登場(chǎng)!

大規(guī)模なアップグレードの準(zhǔn)備をしましょう! React 用のオープンソース ビジュアル エディターである Puck は、CSS グリッドとフレックスボックスを完全にサポートする革新的なドラッグ アンド ドロップ エンジンを備えたバージョン 0.18 をリリースしました。 これにより、ページ ビルダーやノーコード アプリケーションにとって、これまでにない柔軟な設(shè)計(jì)が可能になります。

GitHub で Puck にスターを付けましょう! ?

このアップデートにより以前の制限がなくなり、ユーザーはキャンバス上の任意の場(chǎng)所にコンポーネントをドラッグ アンド ドロップできるようになりました。 可能性を想像してみてください:

ユーザーは、コードを記述することなく、想像できるほぼすべてのデザインを作成できるようになりました。 もう妥協(xié)は必要ありません。純粋な創(chuàng)造的な自由が待っています!

Puck 0.18 は単なる改良ではありません。それは究極のブラウザー內(nèi)デザイン ツールへの変革です。 その適応性は、単純なページレベルのブロックから、アトミックコンポーネント用の非常に詳細(xì)なビジュアルレイアウトビルダーまで、特定のニーズに合わせて拡張できます。 Web サイト、ドキュメント エディター、インフォグラフィック デザイナーを構(gòu)築します。React コンポーネントで構(gòu)築されている場(chǎng)合は、Puck で処理できます。

主な機(jī)能を見(jiàn)てみましょう:

(詳細(xì)については、公式リリースノートと変更ログを參照してください。)

Puck 0.18 にアップデート中

アップデートは簡(jiǎn)単です！ 新しいプロジェクトの場(chǎng)合:

npm install @measured/puck --save

既存のプロジェクトの場(chǎng)合:

npm update @measured/puck

破壊的な変更がないということは、スムーズな移行を意味します。 ?

自由形式のドラッグ アンド ドロップ

新しいドラッグ アンド ドロップ エンジンはゲームチェンジャーです。 以前のバージョンには制限があり、主にドラッグ アンド ドロップが垂直軸に制限されていました。 DropZoneAPI では複數(shù)列のレイアウトが可能でしたが、コンポーネントを手動(dòng)で配置するのは面倒でした。

次に、コンポーネントを任意の方向に自由にドラッグ アンド ドロップします。 Puck は即座に視覚的なフィードバックを提供します:

この設(shè)定は簡(jiǎn)単です。 Puck 構(gòu)成でラッパー DropZone をグリッドまたはフレックスボックスとしてスタイル設(shè)定します。

  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)整することで、洗練されたレイアウトを構(gòu)築できます。

これはフレックス コンテナでも機(jī)能し、レスポンシブなレイアウトを作成します:

これにより、より野心的なレイアウトとインタラクティブなエクスペリエンスが可能になります。

ドロップゾーン間でのドラッグ

任意の DropZone コンテナ間でコンポーネントをドラッグします。 以前は、ドラッグは同じ親を共有するゾーンに限定されていました。 これで、兄弟、ネストされた子、または親の間でコンポーネントをシームレスに移動(dòng)できるようになり、追加のセットアップは必要ありません。

(コンポーネントの制限については、DropZone の allow プロパティを使用してください。)

動(dòng)的な DropZone の高さ

DropZone は、子に合わせて高さを動(dòng)的に調(diào)整し、正確なレンダリング プレビューを提供するようになりました。 一貫したレイアウトを維持するために、空の DropZone のプレースホルダーの高さ (minEmptyHeight) を構(gòu)成します。

npm install @measured/puck --save

グリッドを使用してコンポーネントドロワーを拡張する

新しいドラッグ アンド ドロップ エンジンのおかげで、コンポーネント ドロワー (サイドバー) をグリッドとして表示できるようになりました。

0.18 でさらに詳しく!

• コンポーネントの対話性を切り替えるための対話型ホットキー (cmd/ctrl i)。
• アクションバーの「親を選択」アクション。
• アプリの埋め込みを容易にするために、デフォルトのレイアウトから position: fixed を削除しました。
• アクションバー構(gòu)成用の新しい <ActionBar.Label> コンポーネント。

さらに詳しく知りたい場(chǎng)合は、更新されたドキュメントを參照してください。

最後に思うこと

Puck 0.18 はコミュニティの取り組みです。フィードバックと貢獻(xiàn)をありがとうございました! あなたの作品を共有し、Discord、Bluesky、X で私たちとつながりましょう。そして、? を與えることを忘れないでください。 GitHub で! 次に何を構(gòu)築するか見(jiàn)てみましょう! ?

以上がReact のドラッグ アンド ドロップに革命を起こす: Puck 8 の紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。