Once UI 1.4 ist da – mit neuen Komponenten, verbesserten Komponenten-APIs und lang ersehnten Funktionen. Hier erfahren Sie, was Sie tun müssen, um Ihr Projekt zu aktualisieren.
Der LayoutProvider-Kontext
Dieser Kontext ist für die aktualisierten Flex- und Grid-Komponenten erforderlich. Umschließen Sie die Children Ihrer App in Ihrer layout.tsx oder Providers.tsx mit der LayoutProvider-Komponente. Damit können Sie die Standard-Breakpoints überschreiben. Beachten Sie jedoch, dass die Überschreibungen nur die Laufzeitlogik (Layout Shifts) betreffen und keine Utility-Klassen (Positionierung, Styling usw.). Verwenden Sie die Überschreibungsfunktion mit Vorsicht, da es sich noch um ein Beta-Feature handelt.
Das Breakpoint-Objekt
Eine der wichtigsten Funktionen des neuen Releases ist das Breakpoint-Objekt der Flex- und Grid-Komponenten, das die Props tabletDirection, mobileDirection, tabletColumns, mobileColumns, hide und show ersetzt und zusätzliche Möglichkeiten bietet, Standardstile an verschiedenen Breakpoints zu überschreiben.Schauen wir uns das anhand einiger Beispiele in der Praxis an!Der neue, objektbasierte Ansatz unterstützt einen zusätzlichen Bereich für xs (standardmäßig 480px) und l (standardmäßig 1440px), wobei xl für alles über 1440px steht. Die Eigenschaft fügt beim Laden der Seite eine Utility-Klasse hinzu, um Layout Shifts zu verhindern, und entfernt das Element anschließend aus dem DOM, um die Performance zu optimieren.Alte Syntax:Neue Syntax:Es gibt nur noch eine einzige hide-Prop zur Steuerung der Sichtbarkeit bei verschiedenen Breakpoints. Sie funktioniert ähnlich wie die CSS-Breakpoint-Eigenschaft max-width, was bedeutet, dass sich die Deklaration auch auf alle kleineren Breakpoints auswirkt, sofern nicht anders angegeben.Alte Syntax:Neue Syntax:Grid-Spalten können mit dem neuen Breakpoint-Objekt ebenfalls überschrieben werden.Alte Syntax:Neue Syntax:
Neue Funktionen
Mit dem neuen Breakpoint-Objekt können Sie die meisten Display-Props überschreiben. Hier ist eine Liste der derzeit unterstützten Eigenschaften: direction, horizontal, vertical und position.Beachten Sie im obigen Beispiel auch, dass top nicht gesetzt ist, da es standardmäßig auf 0 gesetzt wird, wenn bei Verwendung von Sticky-Positionierung nichts anderes angegeben ist.Sie können Inline-Stile für verschiedene Breakpoints festlegen, die zur Laufzeit mit einer minimalen Verzögerung aufgelöst werden. Das eignet sich hervorragend für kleinere Anpassungen, insbesondere wenn das Element an einem bestimmten Breakpoint ausgeblendet ist, wie beispielsweise ein mobiles Menü.Wir haben die Komponenten Flex und Grid in Client- und Server-Pendants aufgeteilt. Wann immer Sie sie verwenden, erkennen sie automatisch, ob Client-Funktionalität erforderlich ist, und rendern nur dann mit der Direktive use client, wenn dies tatsächlich notwendig ist.
Vereinfachte Ausrichtung
Die Werte für die Ausrichtung (horizontal und vertical) für Flex sind jetzt über die folgende verkürzte Syntax verfügbar:
Alt
Neu
`space-between`
`between`
`space-around`
`around`
`space-evenly`
`even`
Die neuen Eigenschaften sind kürzer und konsistenter mit den bestehenden Werten start und end.
Migration
Die Verwendung von Suchen und Ersetzen im gesamten Projekt ist für diese Aktualisierungen im Allgemeinen sicher.
Alt
Neu
`tabletDirection="column"`
`m={{direction:"column"}}`
`mobileDirection="column"`
`s={{direction:"column"}}`
`tabletDirection="row"`
`m={{direction:"row"}}`
`mobileDirection="row"`
`s={{direction:"row"}}`
Alt
Neu
`tabletColumns={1}`
`m={{columns: 1}}`
`tabletColumns={2}`
`m={{columns: 2}}`
...
...
`tabletColumns={12}`
`m={{columns: 12}}`
`mobileColumns={1}`
`s={{columns: 1}}`
`mobileColumns={2}`
`s={{columns: 2}}`
`mobileColumns={12}`
`s={{columns: 12}}`
Alt
Neu
`hide="m"`
`m={{hide: true}}`
`hide="s"`
`s={{hide: true}}`
`show="m"`
`hide m={{hide: false}}`
`show="s"`
`hide s={{hide: false}}`
Alt
Neu
`horizontal="space-between"`
`horizontal="between"`
`horizontal="space-around"`
`horizontal="around"`
`horizontal="space-evenly"`
`horizontal="even"`
`vertical="space-between"`
`vertical="between"`
`vertical="space-around"`
`vertical="around"`
`vertical="space-evenly"`
`vertical="even"`
Weitere Aktualisierungen
Wir haben zahlreiche Verbesserungen bei der Barrierefreiheit vorgenommen: überarbeiteter DatePicker, eine Eigenschaft für einen benutzerdefinierten Cursor für Flex und Grid, die reactNode unterstützt, die Einführung von ProgressBar und vieles mehr! Lesen Sie die offizielle Dokumentation.
