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!