Revolutionierung von Drag-and-Drop in React: Einführung von Puck 8

Puck 0.18: Der React Visual Editor der nächsten Generation ist da!

Machen Sie sich bereit für ein gewaltiges Upgrade! Puck, der visuelle Open-Source-Editor für React, hat gerade Version 0.18 veröffentlicht und verfügt über eine revolutionäre Drag-and-Drop-Engine mit vollständiger CSS Grid- und Flexbox-Unterstützung. Dies eröffnet eine beispiellose Designflexibilität für Ihre Seitenersteller und No-Code-Anwendungen.

Geben Sie Puck einen Stern auf GitHub! ⭐

Dieses Update beseitigt frühere Einschränkungen und ermöglicht es Benutzern, jede Komponente per Drag-and-Drop an eine beliebige Stelle auf der Leinwand zu ziehen. Stellen Sie sich die Möglichkeiten vor:

Jetzt können Ihre Benutzer praktisch jedes erdenkliche Design erstellen – und das alles, ohne Code schreiben zu müssen. Keine Kompromisse mehr; pure kreative Freiheit erwartet Sie!

Puck 0,18 ist nicht nur eine Verbesserung; Es ist eine Verwandlung in das ultimative Design-in-Browser-Tool. Seine Anpassungsfähigkeit lässt sich an Ihre spezifischen Anforderungen anpassen, von einfachen Blöcken auf Seitenebene bis hin zu hochgranularen visuellen Layout-Buildern für atomare Komponenten. Erstellen Sie Websites, Dokumenteneditoren, Infografik-Designer – wenn es mit React-Komponenten erstellt wird, kann Puck damit umgehen.

Lassen Sie uns die wichtigsten Funktionen erkunden:

(Detaillierte Informationen finden Sie in den offiziellen Versionshinweisen und im Änderungsprotokoll.)

Aktualisierung auf Puck 0.18

Aktualisierung ist einfach! Für neue Projekte:

npm install @measured/puck --save

Für bestehende Projekte:

npm update @measured/puck

Keine bahnbrechenden Änderungen bedeuten einen reibungslosen Übergang! ?

Freiform-Drag-and-Drop

Die neue Drag-and-Drop-Engine ist ein Game-Changer. Frühere Versionen hatten Einschränkungen und beschränkten sich hauptsächlich auf Drag-and-Drop auf der vertikalen Achse. Während die DropZoneAPI mehrspaltige Layouts ermöglichte, war die manuelle Komponentenpositionierung umständlich.

Jetzt können Sie Komponenten frei in jede Richtung ziehen und ablegen. Puck bietet sofortiges visuelles Feedback:

Die Einrichtung ist einfach. Gestalten Sie Ihre Wrapper-DropZone als Raster oder Flexbox in Ihrer Puck-Konfiguration:

  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>
    );
  },
};

Benutzer können anspruchsvolle Layouts erstellen, indem sie Editorfelder anpassen:

Dies funktioniert auch mit Flex-Containern und erstellt responsive Layouts:

Dies ermöglicht anspruchsvollere Layouts und interaktive Erlebnisse.

Zwischen DropZones ziehen

Ziehen Sie Komponenten zwischen beliebigen DropZone-Containern! Bisher war das Ziehen auf Zonen beschränkt, die dasselbe übergeordnete Element haben. Jetzt können Sie Komponenten nahtlos zwischen Geschwistern, verschachtelten Kindern oder Eltern verschieben – keine zusätzliche Einrichtung erforderlich.

(Verwenden Sie die Requisite allow auf DropZone für Komponenteneinschränkungen.)

Dynamische DropZone-Höhe

DropZones passen ihre Höhe jetzt dynamisch an ihre untergeordneten Elemente an und bieten so eine genaue Rendervorschau. Konfigurieren Sie eine Platzhalterhöhe (minEmptyHeight) für leere DropZones, um konsistente Layouts beizubehalten.

npm install @measured/puck --save

Komponentenschubladen mit Gittern erweitern

Dank der neuen Drag-and-Drop-Engine kann die Komponentenschublade (Seitenleiste) jetzt als Raster angezeigt werden.

Mehr in 0,18!

• Interaktiver Hotkey (cmd/Strg i) zum Umschalten der Komponenteninteraktivität.
• Aktion „Übergeordnetes Element auswählen“ in der Aktionsleiste.
• Entfernt position: fixedaus dem Standardlayout, um die App-Einbettung zu erleichtern.
• Neue <ActionBar.Label> Komponente für die Organisation der Aktionsleiste.

Entdecken Sie die aktualisierte Dokumentation für einen tieferen Einblick!

Abschließende Gedanken

Puck 0.18 ist eine Gemeinschaftsleistung. Vielen Dank für Ihr Feedback und Ihre Beiträge! Teile deine Kreationen und vernetze dich mit uns auf Discord, Bluesky und X. Und vergiss nicht, uns ein ? zu geben. auf GitHub! Mal sehen, was Sie als nächstes bauen! ?

Das obige ist der detaillierte Inhalt vonRevolutionierung von Drag-and-Drop in React: Einführung von Puck 8. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!