Révolutionner le glisser-déposer dans React : présentation de Puck 8

Puck 0.18 : L'éditeur visuel React de nouvelle génération est là !

Préparez-vous pour une mise à niveau massive ! Puck, l'éditeur visuel open source pour React, vient de lancer la version 0.18, dotée d'un moteur de glisser-déposer révolutionnaire avec prise en charge complète de CSS Grid et Flexbox. Cela ouvre une flexibilité de conception sans précédent pour vos créateurs de pages et vos applications sans code.

Donnez une étoile à Puck sur GitHub ! ⭐

Cette mise à jour élimine les limitations précédentes, permettant aux utilisateurs de glisser-déposer n'importe quel composant n'importe où sur le canevas. Imaginez les possibilités :

Désormais, vos utilisateurs peuvent créer pratiquement n'importe quel design imaginable, le tout sans écrire de code. Plus de compromis ; une pure liberté créative vous attend !

Puck 0.18 n'est pas seulement une amélioration ; c'est une transformation vers l'outil ultime de conception dans le navigateur. Son adaptabilité s'adapte à vos besoins spécifiques, depuis de simples blocs au niveau de la page jusqu'à des générateurs de présentation visuelle très granulaires pour les composants atomiques. Créez des sites Web, des éditeurs de documents, des concepteurs d'infographies : s'il est construit avec des composants React, Puck peut le gérer.

Explorons les principales fonctionnalités :

(Pour des informations détaillées, consultez les notes de version officielles et le journal des modifications.)

Mise à jour vers Puck 0.18

La mise à jour est simple ! Pour les nouveaux projets :

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

Pour les projets existants :

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

Aucun changement radical signifie une transition en douceur ! ?

Glisser-déposer de forme libre

Le nouveau moteur glisser-déposer change la donne. Les versions précédentes avaient des limitations, limitant principalement le glisser-déposer à l'axe vertical. Alors que DropZoneAPI permettait des dispositions sur plusieurs colonnes, le positionnement manuel des composants était fastidieux.

Maintenant, faites glisser et déposez librement les composants dans n'importe quelle direction. Puck fournit un retour visuel instantané :

La configuration est simple. Stylisez votre wrapper DropZone sous forme de grille ou de flexbox dans votre configuration Puck :

<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>

Les utilisateurs peuvent créer des mises en page sophistiquées en ajustant les champs de l'éditeur :

Cela fonctionne également avec les conteneurs flexibles, créant des mises en page réactives :

Cela permet des mises en page plus ambitieuses et des expériences interactives.

Glisser entre les DropZones

Faites glisser les composants entre n'importe quel conteneur DropZone ! Auparavant, le déplacement était limité aux zones partageant le même parent. Désormais, déplacez les composants de manière transparente entre frères et sœurs, enfants imbriqués ou parents : aucune configuration supplémentaire n'est nécessaire.

(Utilisez l'accessoire allow sur DropZone pour les restrictions de composants.)

Hauteur de la DropZone dynamique

Les DropZones ajustent désormais dynamiquement leur hauteur pour correspondre à leurs enfants, fournissant ainsi des aperçus de rendu précis. Configurez une hauteur d'espace réservé (minEmptyHeight) pour les DropZones vides afin de maintenir des mises en page cohérentes.

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

Tiroirs à composants extensibles avec grilles

Le composant Drawer (barre latérale) peut désormais être affiché sous forme de grille, grâce au nouveau moteur de glisser-déposer.

Plus en 0,18 !

• Raccourci clavier interactif (cmd/ctrl i) pour activer/désactiver l'interactivité des composants.
• Action "Sélectionner le parent" dans la barre d'action.
• Supprimé position: fixed de la présentation par défaut pour une intégration plus facile des applications.
• Nouveau <ActionBar.Label> composant pour l'organisation de la barre d'action.

Explorez la documentation mise à jour pour une plongée plus approfondie !

Réflexions finales

Puck 0.18 est un effort communautaire. Merci pour vos commentaires et contributions! Partagez vos créations et connectez-vous avec nous sur Discord, Bluesky et X. Et n'oubliez pas de nous donner un ? sur GitHub ! Voyons ce que vous construirez ensuite ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!