Passen Sie das Layout für reaktionsfähiges Authoring an

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer

    • Erfahren Sie beim Erstellen von Seiten mit reaktionsfähigem Authoring für verschiedene Formfaktoren, wie Sie das Layout anpassen können, um das Erscheinungsbild der Seite bei kleineren Größen zu verbessern.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Eine Methode zur Erhöhung der Seitennutzbarkeit besteht darin, Komponenten durch Anpassen des Layouts über Haltepunkte hinweg anzupassen. Es gibt zahlreiche Optionen zum Anpassen des Layouts. Passen Sie in diesem Verfahren das Layout der Registerkartenkomponente für den mobilen Formfaktor an.

    Die meisten Spaltenlayoutoptionen im Eigenschaftsbereich können für verschiedene Formfaktoren bearbeitet werden. Die folgenden Optionen haben jedoch globale Werte für alle Formfaktoren:
    • Anzahl der Spalten
    • Spalten unten stapeln (Pixel) Option
    • Alle Optionen unter Barrierefreiheit

    Eigenschaftenbereich des Spaltenlayouts mit schwarzen Pfeilen, die auf die Optionen verweisen, die nicht durch den Formfaktor festgelegt werden können.

    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 von Grund auf mit reaktionsfähiger Erstellung.
      Weitere Informationen zum Erstellen einer Seite finden Sie unter Erstellen Sie eine Seite in UI Builder .
    4. Überprüfen Sie oben, ob das Desktop-Formfaktor-Symbol ausgewählt ist.
      Schwarzer Pfeil, der auf das Desktop-Formfaktor-Symbol oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.
    5. Wählen Sie in der Phase aus + Inhalt hinzufügen .
    6. Auf Layouts Registerkarte auswählen Einzelne Spalte .
    7. Fügen Sie die Registerkartenkomponente hinzu.
      1. Wählen Sie aus + Symbol in der Mitte der Spalte in der Phase.
      2. Auf Komponenten Suchen und wählen Sie aus Registerkarten Komponente.
      3. Wählen Sie Speichern.
    8. Im Konfigurationsbereich auf Konfigurieren Bearbeiten Sie den Namen der ersten Registerkarte, indem Sie das Bearbeitungssymbol auswählen.
      Konfigurieren Sie die Registerkarte mit einem schwarzen Pfeil, der auf das Registerkartenbearbeitungssymbol zeigt.
    9. In Registerkartenbezeichnung , Eingabetaste Registerkarte 1 .
    10. In Registerkarten-ID , Eingabetaste Registerkarte_1
    11. Wählen Sie Speichern.
    12. Fügen Sie eine zweite Registerkarte hinzu.
      1. Auf Konfigurieren Registerkarte auswählen + Hinzufügen Neben Registerkarten .
      2. Wählen Sie Aus Beginnen Sie mit einem leeren Container Und wählen Sie dann aus Weiter .
      3. In Registerkartenbezeichnung , Eingabetaste Registerkarte 2 .
      4. Überprüfen Sie das Registerkarten-ID Wurde automatisch mit ausgefüllt Registerkarte_2 .
        Konfigurationsbereich mit angezeigter Registerkarte „Konfigurieren“ und einem schwarzen Pfeil, der auf das Bezeichnungsfeld zeigt.
      5. Wählen Sie Erstellen aus.
    13. Fügen Sie eine dritte Registerkarte hinzu, indem Sie Schritt 12 wiederholen, und benennen Sie die Registerkarte in 12c Registerkarte 3 .
    14. Überprüfen Sie, ob Ihre Inhaltsstruktur und -Seite korrekt sind.
      Inhaltsstruktur und Seite mit Spaltenlayout, Spalte und umbenannten Registerkarten hinzugefügt.
    15. Wählen Sie das Tablet-Formfaktor-Symbol aus.

      Schwarzer Pfeil, der auf das Tablet-Formfaktorsymbol oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.

      Der Abstand und die Position der Registerkarten sehen bei der Breite des Tablets gut aus.

    16. Wählen Sie das Symbol für den mobilen Formfaktor aus.

      Schwarzer Pfeil, der auf das Symbol für den mobilen Formfaktor oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.

      Die Registerkarten nehmen bei der kleineren Größe mehr Platz ein.

      Registerkartenkomponente mit Größe des mobilen Formfaktors.

    17. Ändern Sie das Layout der Registerkarten nur für die mobile Größe.
      1. Wählen Sie in der Inhaltsstruktur aus Spalte 1 Unter Spaltenlayout 1 .
      2. Im Konfigurationsbereich in Richtung , Wählen Sie das Zeilensymbol aus.

        Konfigurationsbereich für Spalte 1 mit schwarzem Pfeil, der auf das Zeilensymbol für die Richtungsoption zeigt.

      3. Wählen Sie Speichern.
      Die Phase wird automatisch aktualisiert und zeigt an, dass Registerkarte 1 sichtbar ist und ein neues Dropdown-Menü vorhanden ist.

      Registerkartenkomponente in Größe des mobilen Formfaktors mit angezeigter Registerkarte 1 und einem neuen Dropdown-Menü.

    18. Wählen Sie Vorschau.
    19. Wählen Sie Aus Mehr .
      Die anderen beiden Registerkarten sind verfügbar.

      Mobiler Formfaktor, der in der Vorschauüberlagerung mit erweiterter Dropdown-Liste angezeigt wird.

    20. Wählen Sie die Desktop- und Tablet-Formfaktor-Symbole aus, um zu sehen, dass die Dropdown-Liste „mehr“ nicht angezeigt wird.
    21. Wählen Sie aus X Um zu schließen Vorschau Überlagerung.