Arbeitsmechanismen und Überlegungen für mehrere Rahmenwerke
Shuffle ermöglicht die automatische Konvertierung derselben Komponente zwischen verschiedenen CSS-Frameworks durch eine intelligente zugrundeliegende Architektur, deren technische Umsetzung Folgendes umfasst:
Zentrale Mechanismen
- Komponenten-Mapping-SystemJede UI-Komponente hat eine Version der Code-Implementierung, die einem anderen Framework entspricht.
- Klassennamen-KonvertierungsmaschineAutomatisch konvertieren, z.B. Tailwinds 'bg-blue-500' in Bootstraps 'bg-primary'.
- Frame-fähiger EditorEigenschaften: Das Bedienfeld Eigenschaften zeigt Stiloptionen für den aktuellen Rahmen an.
Empfehlungen für die Verwendung
Beim Umschalten von Rahmen ist Vorsicht geboten:
- Optionen für die InitialisierungFür neue Projekte ist eine explizite Auswahl des Grundgerüsts erforderlich (kann zu einem späteren Zeitpunkt geändert werden, kann aber Anpassungen erfordern).
- Handhabung benutzerdefinierter KlassenManuell hinzugefügte Nicht-Standard-Klassennamen werden nicht automatisch konvertiert.
- Kompatibilität der KomponentenEinige Framework-spezifische Komponenten (z.B. die schwebenden Schaltflächen von Material-UI) können sich in anderen Frameworks anders verhalten.
- Responsive UnterschiedeDas Haltepunktsystem der einzelnen Frameworks (z.B. Bootstraps col-md-* gegenüber Tailwinds md:*) muss neu kalibriert werden.
Es wird empfohlen, die Wirkung der Anzeige auf verschiedenen Geräten mit Hilfe der Live-Vorschau-Funktion oben zu überprüfen und dabei besonders auf die Unterschiede bei der Interaktion von Formularelementen und Navigationskomponenten in verschiedenen Frames zu achten.
Diese Antwort stammt aus dem ArtikelShuffle: Drag-and-Drop-Editor für die schnelle Erstellung von Webvorlagen, mit Unterstützung für die Cursor-ErweiterungDie