Verwenden von CSS-Rasterlayouts zum Erstellen einer Seite
Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.
CSS-Raster ist das leistungsstärkste Layoutsystem in CSS. CSS-Raster basiert auf einem zweidimensionalen Raster. CSS-Raster gibt Ihnen die Kontrolle darüber, wie Sie Ihre Seiten erstellen. Verwenden Sie UI Builder, um ein CSS-Rasterlayout mit Low-Code-Layout-Konfigurationseigenschaften zu implementieren. Für erweiterte Layouts können Sie CSS-Code anzeigen und bearbeiten, um Ihre Layouts anzupassen. Besuchen Sie Mozilla, um mehr über CSS-Raster zu erfahren.
Sie können beispielsweise ein Raster mit drei Spalten und drei Zeilen haben, um ein Raster mit neun Zellen zu erstellen. Sie können Komponenten innerhalb dieser Zellen platzieren oder dafür sorgen, dass sich die Komponente über mehrere Zellen erstreckt.
Durch die Anpassung des Seitenlayouts können Sie das CSS-Raster vollständig nutzen, um Ihr gesamtes Seitendesign zu optimieren. Weitere Informationen finden Sie unter Organisieren Sie Komponenten auf UI Builder-Seiten.
Weitere Informationen zu CSS-Layouts in Ihrer Instanz UI Builder finden Sie in der Tabelle [sys_uib_template].
Erstellen Sie ein CSS-Rasterlayout mit dem neuen Layoutsystem
Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten in einer Low-Code-Umgebung zu erstellen.
Vorbereitungen
Erforderliche Rolle: admin
Prozedur
-
Wählen Sie auf der Registerkarte „Layouts“ die Option Raster aus.
-
Im Abschnitt „ Layout “ sollte Raster hervorgehoben angezeigt werden.
-
Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie
.
Erstellen Sie ein CSS-Rasterlayout mit dem alten Layoutsystem
Erstellen Sie ein CSS-Rasterlayout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.
Vorbereitungen
Erforderliche Rolle: admin
Warum und wann dieser Vorgang ausgeführt wird
Im folgenden Verfahren erfahren Sie, wie Sie CSS-Raster verwenden, um Ihr CSS zu ändern und das Layout Ihrer Seite anzupassen.
Prozedur
-
Klicken Sie auf die Registerkarte Layout, und wählen Sie das Layout mit zwei Zeilen und zwei Spalten aus.
Abbildung : 2. Standardlayout mit zwei Zeilen und zwei Spalten -
Klicken Sie auf Layoutcode bearbeiten.
Abbildung : 3. Bearbeiten Sie den Layoutcode -
Erweitern Sie den Code-Editor, damit Sie den CSS-Code einfach anzeigen können.
Abbildung : 4. Erweitern Sie den Code-Editor -
Fügen Sie dem Layout einen weiteren Slot hinzu, indem Sie den CSS-Code für einen vorhandenen Slot kopieren.
Das Kopieren des CSS-Codes ist einfacher, als ihn in das Layout einzugeben.
Abbildung : 5. Kopieren Sie den CSS-Code für einen Slot -
Fügen Sie den CSS-Code unter dem kopierten Code ein, und ändern Sie slotName und grid-area in einen eindeutigen Wert.
Abbildung : 6. Fügen Sie den CSS-Code ein -
Ändern Sie die Layoutregeln wie folgt, um die neue Spalte und den neuen Vorlagenbereich einzubeziehen:
-
Löschen Sie die Zeile
„Grid-template-columns“: „1fr 1fr“. - Fügen Sie eine zweite Zelle1 nach Zelle1 hinzu, und fügen Sie dann Zelle5 nach Zelle4 hinzu.
Abbildung : 7. Ändern Sie die Layoutregeln Sie können viele verschiedene Konfigurationen festlegen. In diesem Beispiel gibt es die beiden resultierenden Raster aus zwei verschiedenen Rastervorlagenbereichen. Die Eigenschaft "grid-template-areas", die geändert wird, legt die gleichnamige CSS-Eigenschaft fest. Weitere Informationen finden Sie unter MDN-Rastervorlagen-Bereiche.
Abbildung : 8. Rastervorlagenbereiche -
Löschen Sie die Zeile
-
Reduzieren Sie die erweiterte Ansicht, und klicken Sie dann auf Anwenden.
Abbildung : 9. Wenden Sie eine Layoutänderung an