React のドラッグ アンド ドロップに革命を起こす: Puck 8 の紹介

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

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

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

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

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

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

主な機能を見てみましょう:

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

Puck 0.18 にアップデート中

アップデートは簡単です！ 新しいプロジェクトの場合:

<code class="language-bash">npm install @measured/puck --save</code>

既存のプロジェクトの場合:

<code class="language-bash">npm update @measured/puck</code>

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

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

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

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

この設定は簡単です。 Puck 構成でラッパー DropZone をグリッドまたはフレックスボックスとしてスタイル設定します。

<code class="language-javascript">  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>
    );
  },
};</code>

ユーザーはエディターのフィールドを調整することで、洗練されたレイアウトを構築できます。

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

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

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

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

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

動的な DropZone の高さ

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

<code class="language-bash">npm install @measured/puck --save</code>

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

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

0.18 でさらに詳しく!

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

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

最後に思うこと

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

以上がReact のドラッグ アンド ドロップに革命を起こす: Puck 8 の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。