Verwenden Sie CSS-Rasterlayouts, um eine Seite zu erstellen

Erstellen Sie ein CSS-Rasterlayout in UI BuilderErstellen leistungsstarker Seiten, damit Sie mit Cascading Stylesheets (CSS) anpassen und Ihre Leistung verbessern können.

CSS-Raster ist das leistungsstärkste Layoutsystem in CSS. CSS-Raster wird auf einem zweidimensionalen Raster erstellt. Mit dem CSS-Raster können Sie steuern, wie Sie Ihre Seiten erstellen. Verwenden UI BuilderDient zur Implementierung eines CSS-Rasterlayouts mithilfe von Low-Code-Layoutkonfigurationseigenschaften. Für erweiterte Layouts können Sie CSS-Code anzeigen und bearbeiten, um Ihre Layouts anzupassen. Besuchen 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 in diesen Zellen platzieren oder die Komponente mehrere Zellen umfassen.

Abbildung : 1. CSS-Rasterlayout

Durch das Anpassen des Layouts Ihrer Seite können Sie das CSS-Raster vollständig nutzen, damit Sie Ihr gesamtes Seitendesign erreichen können. Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.

Um mehr über CSS-Layouts in zu erfahren UI BuilderInstanz finden Sie sie in der Tabelle [sys_uib_template].

Erstellen Sie ein CSS-Rasterlayout mit dem neuen Layoutsystem

Erstellen Sie ein CSS-Rasterlayout in UI BuilderZum Erstellen leistungsfähiger Seiten in einer Low-Code-Umgebung.

Vorbereitungen

Erforderliche Rolle: Administrator

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
3. Erstellen Sie eine Seite in UI Builder.
4. Wählen Sie aus + Inhalt hinzufügen Schaltfläche in UI BuilderPhase.
5. Wählen Sie Aus Raster Auf der Registerkarte „Layouts“.
   
6. Wählen Sie aus Stile Registerkarte im Konfigurationsbereich.
7. In Layout Abschnitt, sollte angezeigt werden Raster Hervorgehoben.
   
8. In Layout Abschnitt der Registerkarte „Stile“ können Sie Folgendes ändern:

   Spalten

   Definiert die Anzahl, Reihenfolge und Breite der Rasterspalten.

   Zeilen

   Definiert die Anzahl, Reihenfolge und Breite der Rasterzeilen.

   Wegbeschreibung

   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 Aus Erweiterte Layoutoptionen anzeigen 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 Bereichs 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 Mozilla Um mehr über CSS-Rasterlayoutkonfigurationen zu erfahren.

9. Wahlweise: Sie können den CSS-Code bearbeiten, indem Sie auswählen Erweiterte Konfigurationsoptionen anzeigen Unten in Stile Und wählen Sie dann aus Zeigen Sie CSS an, und bearbeiten Sie sie Option.
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 auswählen .

Erstellen Sie ein CSS-Rasterlayout mit dem alten Layoutsystem

Erstellen Sie ein CSS-Rasterlayout in UI BuilderErstellen leistungsstarker Seiten, damit Sie mit Cascading Stylesheets (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, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
3. Erstellen Sie eine Seite in UI Builder Oder öffnen Sie eine Seite.
4. Klicken Sie auf Layout Registerkarte und wählen Sie das zweizeilige Layout nach zweispaltigem Layout aus.

   Abbildung : 2. Standardmäßiges zweizeiliges Layout mit zwei Spalten

   

5. Klicken Sie Auf Bearbeiten Sie den Layoutcode .

   Abbildung : 3. Bearbeiten Sie den Layoutcode

   

6. Erweitern Sie den Code-Editor, damit Sie den CSS-Code einfach anzeigen 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 die Eingabe in das Layout.

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

   

8. Fügen Sie den CSS-Code unter dem Code ein, den Sie kopiert haben, und ändern Sie den slotNameUnd grid-areaZu einem 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 „Grid-template-columns“: „1fr 1fr“, Position.
   2. Fügen Sie eine Sekunde hinzu Zelle 1 Danach Zelle 1 , Und fügen Sie dann hinzu Zelle 5 Danach Zelle 4 .

   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 "grid-template-areas"Die Eigenschaft, die geändert wird, legt die CSS-Eigenschaft mit demselben Namen fest. Weitere Informationen finden Sie unter MDN-Rastervorlagen-Bereiche .

   Abbildung : 8. Rastervorlagenbereiche

   

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

    Abbildung : 9. Wenden Sie eine Layoutänderung an

    

Ergebnisse

Das neue CSS-Rasterlayout zeigt, dass der neue Slot dem ursprünglichen zweizeiligen zweispaltigen Layout hinzugefügt wurde.

Abbildung : 10. Neues anwenderdefiniertes Layout

Klicken Sie Auf Auf Original zurücksetzen Zum Zurücksetzen des Layouts ändern Sie jederzeit auf das Original.

Abbildung : 11. Setzt ein Layout zurück

Zugehörige Tasks

• Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem