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 leistungsfähigste Layoutsystem in CSS. CSS-Raster basiert auf einem zweidimensionalen Raster. Mit CSS-Raster können Sie steuern, wie Sie Ihre Seiten erstellen. Verwenden Sie UI Builder, um ein CSS-Rasterlayout mit Low-Code-Layoutkonfigurationseigenschaften zu implementieren. Bei erweiterten 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 verwenden, um ein Raster mit neun Zellen zu erstellen. Sie können Komponenten innerhalb dieser Zellen platzieren oder die Komponente auf mehrere Zellen aufspannen lassen.

Abbildung : 1. CSS-Rasterlayout

Durch das Anpassen des Layouts Ihrer Seite können Sie das CSS-Raster optimal nutzen und so Ihr gesamtes Seitendesign erreichen. Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.

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 Umgebung mit wenig Code zu erstellen.

Vorbereitungen

Erforderliche Rolle: Administrator

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder.
4. Wählen Sie in der Phase UI Builder die Schaltfläche + Inhalt hinzufügen aus.
5. Wählen Sie Raster auf der Registerkarte Layouts.
   
6. Wählen Sie im Konfigurationsbereich die Registerkarte Stile.
7. Im Abschnitt „Layout“ sollte Raster hervorgehoben sein.
   
8. Im Abschnitt „Layout“ der Registerkarte „Stile“ können Sie Folgendes ändern:

   Spalten

   Definiert die Anzahl, Reihenfolge und Breite von Rasterspalten.

   Zeilen

   Definiert die Anzahl, Reihenfolge und Breite von Rasterzeilen.

   Richtung

   Legt fest, ob neu hinzugefügte Komponenten horizontal oder vertikal gestapelt werden.

   Abstand

   Legt die Größe des Abstands zwischen Zeilen und Spalten fest.

   Hinweis:

   Wählen Sie Erweiterte Layoutoptionen anzeigen aus, um die nächsten vier Optionen anzuzeigen.

   Elemente ausrichten

   Definiert, wie Komponenten innerhalb des Containers als Gruppe ausgerichtet werden.

   Elemente begründen

   Definiert, wie der Browser Platz zwischen und um Inhaltselemente entlang der Inline-Achse eines Rastercontainers verteilt.

   Inhalt ausrichten

   Legt die Verteilung des Platzes zwischen und um Inhaltselemente entlang der Blockachse eines Rasters fest.

   Inhalt begründen

   Definiert, wie die Komponenten innerhalb des Containers verpackt oder verteilt werden.

   Besuchen Sie Mozilla, um mehr über die Konfiguration des CSS-Rasterlayouts zu erfahren.

9. Wahlweise: Sie können den CSS-Code bearbeiten, indem Sie Erweiterte Konfigurationsoptionen anzeigen unten auf der Registerkarte Stile und dann die Option CSS anzeigen und bearbeiten auswählen.
10. Wählen Sie Speichern.
    Ihre Seite wird aktualisiert und zeigt die am Layout vorgenommenen Änderungen an.
11. Fügen Sie Ihrer Seite Komponenten hinzu.
    Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
12. 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: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Im folgenden Verfahren erfahren Sie, wie Sie das CSS-Raster verwenden, um Ihr CSS zu ändern, um das Layout Ihrer Seite anzupassen.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen Sie eine Seite in UI Builder oder öffnen Sie eine Seite.
4. 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

   

5. Klicken Sie auf Layoutcode bearbeiten.

   Abbildung : 3. Bearbeiten Sie den Layoutcode

   

6. Erweitern Sie den Code-Editor, um den CSS-Code einfach anzeigen zu können.

   Abbildung : 4. Erweitern Sie den Code-Editor

   

7. 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 das Eingeben in das Layout.

   Abbildung : 5. Kopieren Sie den CSS-Code für einen Slot

   

8. 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

   

9. Ändern Sie die Layoutregeln wie folgt, um die neue Spalte und den Vorlagenbereich einzubeziehen:
   1. Löschen Sie die Zeile „Raster-Vorlagen-Spalten“: „1fr 1fr“.
   2. Fügen Sie eine zweite Zelle1 nach Zelle1und Zelle5 nach Zelle4hinzu.

   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-Rastervorlagenbereiche.

   Abbildung : 8. Rastervorlagenbereiche

   

10. Reduzieren Sie die erweiterte Ansicht, und klicken Sie dann auf Übernehmen.

    Abbildung : 9. Wenden Sie eine Layoutänderung an

    

Ergebnisse

Das neue CSS-Rasterlayout zeigt, dass der neue Slot dem ursprünglichen Layout mit zwei Zeilen und zwei Spalten hinzugefügt wurde.

Abbildung : 10. Neues anwenderdefiniertes Layout

Klicken Sie jederzeit auf Auf Ursprung zurücksetzen, um die Layout-Änderungen auf den Ursprung zurückzusetzen.

Abbildung : 11. Setzen Sie ein Layout zurück

Zugehörige Tasks

• Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem