Verwenden von Flexbox-Layouts in UI Builder

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 4 Minuten Lesedauer

    • Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten zu erstellen, die Sie mit Cascading Style Sheets (CSS) anpassen und Ihre Leistung verbessern können.

    Sie können in UI Builderganz einfach benutzerdefinierte Seiten mit Flexbox-Layouts erstellen. Durch die Anpassung des Seitenlayouts können Sie Flexbox in vollem Umfang nutzen, um Ihr gesamtes Seitendesign zu optimieren. Weitere Informationen finden Sie unter Organisieren Sie Komponenten auf UI Builder-Seiten.

    Flexbox ist ein eindimensionales Layoutsystem in CSS. Flexbox ist von Natur aus flexibel, was nützlich ist, wenn Sie die Größe Ihres Inhalts nicht kennen. Wenn Sie komplexe Seiten erstellen möchten, können Sie das Layout Ihrer Seite auf der Registerkarte „Stile“ des Konfigurationsbereichs oder mit CSS anpassen. Besuchen Sie Mozilla, um mehr über Flexbox zu erfahren.

    Sie können die Richtung Ihres Inhalts im Layout wie folgt ändern:
    • Zeile: Zeilen werden je nach Richtung der Standardsprache Ihres Browsers von links nach rechts oder von rechts nach links angeordnet. Links/rechts ist bei einem englischsprachigen Browser der Fall.
    • Zeilenumkehr: Zeilen werden in der umgekehrten Richtung der Standardsprache Ihres Browsers organisiert, z. B. von rechts nach links oder von links nach rechts.
    • Spalte: Nach oben/nach unten oder nach unten/nach oben
    • Spaltenumkehr: Nach unten/nach oben
      Abbildung : 1. Flexbox-Zeilen- und -Spaltenrichtungen
      Diagramm mit Zeilen- und Spaltenrichtungen in Flexbox
    • Inhalt begründen: Definiert die Ausrichtung entlang der Hauptachse. Die Auswahlmöglichkeiten lauten wie folgt:
      • Flex-Start: Elemente befinden sich am Anfang der Flex-Richtung, ähnlich wie links ausgerichteter Inhalt. Das ist die Standardeinstellung.
      • Flex-Ende: Elemente befinden sich am Ende der Flex-Richtung, ähnlich wie rechts ausgerichteter Inhalt.
      • Abstand zwischen: Elemente werden gleichmäßig verteilt.
      • Space-around: Elemente werden gleichmäßig mit gleichem Platz um sie herum verteilt.
      • Flächengleichmäßig: Der Abstand zwischen Elementen beträgt gleich.
    • Elemente ausrichten: Definiert, wie der Flex-Inhalt entlang der Querachse angezeigt werden soll. Die Auswahlmöglichkeiten lauten wie folgt:
      • Dehnen: Dehnen Sie Ihren Inhalt, um den Container zu füllen. Dies ist die Standardeinstellung
      • Flex-Start: Platzieren Sie Ihre Inhalte am Anfang der Querachse.
      • Flex-Ende: Platzieren Sie Ihre Inhalte am Ende der Querachse.
      • Zentriert: Zentrieren Sie Ihre Inhalte in der Querachse.
      • Basissystem: Richten Sie Ihren Inhalt gleich Ihrer Baseline - -Ausrichtungaus.
    • Höhe: Legen Sie die Höhe automatisch oder manuell fest.
    • Breite: Legen Sie die Höhe Ihrer Flexbox-Elemente automatisch oder manuell fest.
    • Rand: Legen Sie den minimalen Abstand zwischen Flexbox-Elementen fest.
    • Abstand: Legen Sie den Abstand für jede Seite Ihrer Flexbox-Elemente fest.

    Erstellen Sie ein Flexbox-Layout mit dem neuen Layoutsystem

    Erstellen Sie ein Flexbox-Layout in UI Builder, um leistungsstarke Seiten in einer Low-Code-Umgebung zu erstellen.

    Vorbereitungen

    Erforderliche Rolle: admin

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
    3. Erstellen Sie eine Seite in UI Builderan.
    4. Klicken Sie in der Phase UI Builder auf das + -Symbol.
    5. Wählen Sie auf der Registerkarte „Layouts“ die Option Flexbox aus.
      Pfeil, der auf die Option „Flexbox“ auf der Registerkarte „Layouts“ der Toolbox zeigt.
    6. Wechseln Sie im Konfigurationsbereich zur Registerkarte Stile.
    7. Im Abschnitt „ Layout “ sollte Flexbox hervorgehoben angezeigt werden.
      Pfeil, der auf die Registerkarte „Stile“ des Konfigurationsbereichs auf die Option „Flexbox“ zeigt.
    8. Im Abschnitt „ Layout “ der Registerkarte „Stile“ können Sie Folgendes ändern:
      Richtung
      Definieren Sie, wie Komponenten horizontal oder vertikal gestapelt werden sollen.
      Elemente ausrichten
      Definieren Sie, wie Komponenten innerhalb von Containern als Gruppe ausgerichtet werden.
      Inhalt begründen
      Definieren Sie, wie die Komponenten im Container verpackt oder verteilt werden sollen.
      Hinweis:
      Wählen Sie Erweiterte Layoutoptionen anzeigen aus, um die nächsten beiden Optionen anzuzeigen.
      Abstand
      Legen Sie die Größe des Abstands zwischen Zeilen und Spalten fest.
      Untergeordnete Elemente in mehrere Zeilen umbrechen
      Legen Sie fest, ob Komponenten in eine Zeile gezwungen werden oder in mehrere Zeilen überlaufen.

      Besuchen Sie Mozilla, um mehr über Flexbox-Layoutkonfigurationen zu erfahren.

    9. Wahlweise: Sie können den CSS-Code bearbeiten, indem Sie unten auf der Registerkarte Stile die Option Erweiterte Konfigurationsoptionen anzeigen 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 Fügen Sie Komponenten hinzu, und konfigurieren Sie sie.
    12. Zeigen Sie Ihre Seite an, und testen Sie sie, indem Sie auf die Schaltfläche Vorschau klicken, mit der die Seitenvariante geöffnet wird..

    Erstellen Sie ein Flexbox-Layout mit dem alten Layoutsystem

    Erstellen Sie ein Flexbox-Layout 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 mit Flexbox den CSS-Code ändern, um das Layout Ihrer Seite anzupassen.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in 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 zweispaltige Layout aus.
      Abbildung : 2. Standardmäßiges Zwei-Spalten-Layout
      Standardmäßiges Zwei-Spalten-Layout.
    5. Klicken Sie auf Layoutcode bearbeiten.
      Abbildung : 3. Bearbeiten Sie den Layoutcode
      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
      Pfeil, der zeigt, um die Code-Editor-Schaltfläche zu erweitern.
    7. Fügen Sie dem Layout einen weiteren Slot hinzu, indem Sie den CSS-Code für einen vorhandenen Slot kopieren.

      Das Kopieren des Codes ist einfacher, als ihn in das Layout einzugeben.

      Abbildung : 5. Kopieren Sie den CSS-Code für einen Slot
      Pfeil, der zeigt, um den CSS-Code für einen Slot zu kopieren.
    8. Platzieren Sie unter dem Code, den Sie kopiert haben, ein Komma, und fügen Sie dann den folgenden CSS-Code ein:
      1. Ändern Sie die Eigenschaft "slotName" in „Spalte 3“.
      2. Ändern Sie die Eigenschaft "flex" in „2“.
      3. Fügen Sie "margin-left": "1rem" hinzu.
      Abbildung : 6. Fügen Sie den CSS-Code ein
      CSS-Code wird eingefügt.

      Durch Ändern der Eigenschaft "flex" wird die Größe der Spalte erhöht. Durch die Verwendung von "margin-left"fügen Sie Platz zwischen den vorherigen Spalten hinzu.

    9. Reduzieren Sie die erweiterte Ansicht, und klicken Sie dann auf Anwenden.
      Abbildung : 7. Wenden Sie eine Layoutänderung an
      Eine Layoutänderung wird angewendet.

    Ergebnisse

    Das neue Flexbox-Layout, das Sie erstellt haben, zeigt den neuen Slot, den Sie dem ursprünglichen zweispaltigen Layout hinzugefügt haben.
    Abbildung : 8. Neues benutzerdefiniertes Layout
    Neues, fertiges benutzerdefiniertes Layout.
    Klicken Sie auf Auf Original zurücksetzen, um Layoutänderungen auf das Original zurückzusetzen.
    Abbildung : 9. Setzen Sie ein Layout zurück
    Pfeil, der zeigt, um auf die ursprüngliche Option zurückzusetzen.