Passen Sie das Layout für Responsive Authoring an

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 2 Minuten Lesedauer

    • Erfahren Sie, wie Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren 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 Verbesserung der Anwenderfreundlichkeit von Seiten besteht darin, Komponenten anzupassen, indem das Layout über Haltepunkte hinweg angepasst wird. Es gibt zahlreiche Optionen zum Anpassen des Layouts. In diesem Verfahren passen Sie das Layout der Registerkartenkomponente für den mobilen Formfaktor an.

    Die meisten Spaltenlayoutoptionen im Eigenschaftenbereich können für verschiedene Formfaktoren bearbeitet werden. Die folgenden Optionen haben jedoch formfaktorübergreifende globale Werte:
    • Anzahl der Spalten
    • OptionSpalten unterhalb stapeln (Pixel).
    • Alle Optionen unter Eingabehilfe

    Bereich mit Spaltenlayout-Eigenschaften mit schwarzen Pfeilen, die auf die Optionen zeigen, die nicht nach Formfaktor festgelegt werden können.

    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 Erstellen > Experiencewählen.
      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 von Grund auf neu mit reaktionsfähiger Dokumenterstellung.
      Weitere Informationen zum Erstellen einer Seite finden Sie unter Seite in UI Builder erstellen.
    4. Überprüfen Sie oben, ob das Symbol für den Desktop-Formfaktor ausgewählt ist.
      Schwarzer Pfeil, der auf das Symbol für den Desktop-Formfaktor zeigt, oben auf einer UI Builder-Seite in der Editor-Ansicht.
    5. Wählen Sie in der Phase + Inhalt hinzufügen aus.
    6. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
    7. Fügen Sie die Registerkartenkomponente hinzu.
      1. Wählen Sie das Symbol + in der Mitte der Spalte in der Phase aus.
      2. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Registerkarten, und wählen Sie sie aus.
      3. Wählen Sie Speichern.
    8. Bearbeiten Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Namen der ersten Registerkarte, indem Sie das Bearbeitungssymbol auswählen.
      Konfigurieren Sie die Registerkarte mit einem schwarzen Pfeil, der auf das Bearbeitungssymbol der Registerkarte zeigt.
    9. Geben Sieunter Registerkartenbezeichnung den Wert Registerkarte 1ein.
    10. Geben Sie im Feld Registerkarten- IDtab_1ein
    11. Wählen Sie Speichern.
    12. Fügen Sie eine zweite Registerkarte hinzu.
      1. Wählen Sie auf der Registerkarte Konfigurieren die Option + Hinzufügen neben Registerkartenaus.
      2. Wählen Sie In einem leeren Container starten und dann Weiteraus.
      3. Geben Sieunter Registerkartenbezeichnung den Wert Registerkarte 2ein.
      4. Überprüfen Sie, ob die Registerkarten- ID automatisch mit tab_2ausgefüllt wurde.
        Konfigurationsbereich mit angezeigter Registerkarte „Konfigurieren“ und schwarzer Pfeil, der auf das Beschriftungsfeld zeigt.
      5. Wählen Sie Erstellen aus.
    13. Fügen Sie eine dritte Registerkarte hinzu, indem Sie Schritt 12 wiederholen. Benennen Sie die Registerkarte in Schritt 12c mit Tab 3.
    14. Überprüfen Sie, ob Ihre Inhaltsstruktur und Seite korrekt sind.
      Inhaltsstruktur und -seite mit Spaltenlayout, Spalte und hinzugefügten umbenannten Registerkarten.
    15. Wählen Sie das Symbol für den Tablet-Formfaktor.

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

      Der Abstand und die Position der Registerkarten sehen anhand der Tablet-Breite gut aus.

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

      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 geringerer Größe mehr Platz ein.

      Registerkartenkomponente in der 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 Spalte 1 unter Spaltenlayout 1aus.
      2. Wählen Sie im Konfigurationsbereich unter Richtungdas Zeilensymbol aus.

        Konfigurationsbereich für Spalte 1 mit schwarzen 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 dass ein neues Dropdownmenü vorhanden ist.

      Registerkartenkomponente in Mobile-Formfaktor-Größe mit angezeigter Registerkarte 1 und neuem Dropdown-Menü.

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

      Mobiler Formfaktor, der in der Vorschauüberlagerung mit erweiterter Dropdownliste angezeigt wird.

    20. Wählen Sie die Symbole für den Desktop- und Tablet-Formfaktor aus, um anzuzeigen, dass das Dropdown-Menü Mehr nicht angezeigt wird.
    21. Wählen Sie zum Schließen der Überlagerung Vorschau das X aus.