Anpassen der Sichtbarkeit von Komponenten in reaktionsfähigem Authoring

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

    • Wenn Sie Seiten mit reaktionsfähiger Erstellung für verschiedene Formfaktoren erstellen, erfahren Sie, wie Sie Komponenten anzeigen oder ausblenden, indem Sie die Schritte zum Ausblenden eines Bildes in mobiler Größe ausführen.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Eine Methode zur Erhöhung der Seitennutzbarkeit besteht darin, Komponenten auszublenden oder eine andere Komponente über Haltepunkte hinweg anzuzeigen. Es gibt unzählige Möglichkeiten, die Komponentensichtbarkeit zu verwenden, aber einige Beispiele sind:
    • Verwenden Sie mehrere Schaltflächenkomponenten horizontal oben auf einer Seite für Desktop- und Tablet-Größe, aber bei Mobilgröße blenden Sie die Schaltflächen aus, und zeigen Sie die Dropdown-Komponente an.
    • Verwenden Sie eine kleinere Schaltflächengröße für die mobile Größe, aber überprüfen Sie, ob die Schaltflächen groß genug sind, damit Anwender mit dem Daumen drücken können. Erwägen Sie, die Platzierung der Schaltflächen auch für Mobilgeräte zu ändern.
    • Verwenden Sie Bilder auf Desktop- und Tablet-Seiten, aber blenden Sie Bilder, insbesondere größere, auf Mobilgeräten aus.

    In diesem Verfahren können Sie Schaltflächen oben für die Formfaktoren Desktop und Tablet anzeigen, aber die Schaltflächen ausblenden und die Dropdown-Komponente für Mobilgeräte verwenden.

    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. Fügen Sie ein Spaltenlayout hinzu, indem Sie auswählen + Inhalt hinzufügen Unter Textkörper In der Inhaltsstruktur.
    6. Auf Layouts Registerkarte auswählen Einzelne Spalte .
    7. Fügen Sie die erste Schaltflächenkomponente hinzu.
      1. Wählen Sie aus + Symbol in der Mitte der neuen Spalte in der Phase.
      2. Auf Komponenten Suchen und wählen Sie aus Schaltfläche Komponente.
      3. Wählen Sie im Konfigurationsbereich aus Keine: Konfigurieren Sie die Komponente manuell .
      4. Im Konfigurationsbereich auf Konfigurieren Registerkarte, ersetzen Sie den Standardtext in Bezeichnung Feld durch Eingabe Aufgaben .
        Schaltflächenkomponente konfiguriert die Registerkarte mit einem schwarzen Pfeil, der auf das Bezeichnungsfeld zeigt.
      5. Wählen Sie Speichern.
    8. Fügen Sie zwei weitere Schaltflächen hinzu, indem Sie Schritt 7 zweimal wiederholen, und benennen Sie die Schaltflächen in 7 Tagen Incidents Und Changes .
      Hinweis:
      Zeigen Sie auf, um die Schaltflächen hinzuzufügen Schaltfläche 1 Wählen Sie in der Inhaltsstruktur das Menüsymbol aus, und wählen Sie dann aus Hinzufügen nach .

      Wird hinzugefügt nach

    9. Überprüfen Sie, ob die Inhaltsstruktur und die Seite korrekt sind.
      Inhaltsstruktur und Seite mit Spaltenlayout, Spalten- und Schaltflächenkomponenten hinzugefügt.
    10. Fügen Sie um jede Schaltfläche etwas Platz hinzu.
      1. Wählen Sie in der Inhaltsstruktur aus Schaltfläche 1 .
      2. Wählen Sie im Konfigurationsbereich aus Stile Registerkarte.
      3. In Abstand , Auswählen Marge .
      4. Wählen Sie im Menü die Option aus XS (Sehr klein).
        Konfigurationsbereich mit schwarzen Pfeilen, die auf die Randoption zeigen, und Option für besonders kleine Größe.
      5. Wählen Sie Speichern.
    11. Fügen Sie Platz um die anderen beiden Schaltflächen hinzu, indem Sie Schritt 10 für jede wiederholen.
    12. Ändern Sie die Schaltflächen von der vertikalen Richtung in die horizontale Richtung.
      1. Wählen Sie Aus Spalte 1 In der Inhaltsstruktur.
      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 Seite sieht in der Desktop-Breite gut aus.

      Schaltflächen, die im horizontalen Layout bei Desktop-Formfaktor angezeigt werden.

    13. 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 Schaltflächen sehen auch auf der Breite des Tablets gut aus.

      Schaltflächen, die im horizontalen Layout bei Tablet-Formfaktor angezeigt werden.

    14. Wählen Sie das Symbol für die mobile reaktionsfähige Erstellung aus.

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

      Die Schaltflächen verwenden fast den gesamten horizontalen Bereich bei kleinerer Größe.

      Schaltflächen, die im horizontalen Layout mit dem mobilen Formfaktor angezeigt werden.

    15. Fügen Sie die Dropdown-Komponente hinzu.
      1. Wählen Sie den Desktop-Formfaktor oben in der Phase aus.
      2. Zeigen Sie auf Schaltfläche 3 Wählen Sie in der Inhaltsstruktur das Menüsymbol aus, und wählen Sie dann aus Hinzufügen nach .
      3. Auf Komponenten Suchen und wählen Sie aus Dropdownliste Komponente.
      4. Wählen Sie im Konfigurationsbereich aus Keine: Konfigurieren Sie die Komponente manuell .
      5. Im Konfigurationsbereich auf Konfigurieren Registerkarte, entfernen Sie den Standardtext in Platzhaltertext Und wählen Sie aus Menü-Gliederung In Symbol .
        Konfigurationsoptionen der Dropdown-Komponente.
      6. Wählen Sie Speichern.
    16. Blenden Sie die Dropdown-Komponente in den Desktop- und Tablet-Formfaktoren aus.
      1. Wählen Sie in der Inhaltsstruktur aus Dropdownliste 1 .
      2. Im Konfigurationsbereich auf Konfigurieren Registerkarte auswählen Komponentensichtbarkeit Zum Anzeigen der Optionen.
      3. Wählen Sie Aus Komponente ausblenden .
      4. Wählen Sie Speichern.
    17. Blenden Sie im mobilen Formfaktor die Schaltflächenkomponenten aus.
      1. Wählen Sie das Symbol für den mobilen Formfaktor oben in der Phase aus.
      2. Wählen Sie in der Inhaltsstruktur aus Schaltfläche 1 .
      3. Im Konfigurationsbereich auf Konfigurieren Registerkarte auswählen Komponente ausblenden .
      4. Wiederholen Sie die Schritte b–c für Schaltfläche 2 Und Schaltfläche 3 .
      5. Wählen Sie Speichern.
      Zwei Stellen zeigen, dass die Schaltflächenkomponenten in mobiler Größe ausgeblendet sind. Zuerst im Konfigurationsbereich neben Komponente ausblenden Option: Wählen Sie das mobile Symbol aus. Eine Nachricht wird angezeigt, um zu bestätigen, dass der Wert (ausgewählte Komponente ausblenden) für die mobile Größe gilt.

      Konfigurationsbereich mit angezeigter Registerkarte „Konfigurieren“ und einem schwarzen Pfeil, der auf die Nachricht verweist.

      Zweitens werden in der Inhaltsstruktur die drei Schaltflächenkomponenten mit ausgeblendetem angezeigt Ausgeblendetes SymbolSymbol.
    18. Zeigen Sie im mobilen Formfaktor die Dropdown-Komponente an.
      1. Wählen Sie in der Inhaltsstruktur aus Dropdownliste 1 .
      2. Im Konfigurationsbereich auf Konfigurieren Registerkarte auswählen Komponente ausblenden Um das Feld zu löschen.
      3. Wählen Sie Speichern.
    19. Wählen Sie Vorschau.
      Der mobile Formfaktor wird mit dem Menüsymbol angezeigt. Wenn Sie den Pfeil auswählen, werden die Standardoptionen angezeigt (Listenelement 1, Listenelement 2 usw.). Sie würden die Dropdown-Komponente konfigurieren, die angezeigt werden soll Aufgaben , Incidents , Und Changes Genau wie die horizontalen Schaltflächen, die im Tablet- und Desktop-Formfaktor verfügbar sind.

      Mobiler Formfaktor, der in der Vorschauüberlagerung angezeigt wird.

    20. Wählen Sie oben die Desktop- und Tablet-Formfaktor-Symbole aus.
      Die Desktop- und Tablet-Formfaktoren zeigen nur die horizontalen Schaltflächen, nicht das Menüsymbol.
    21. Schließen Sie die Vorschauüberlagerung, indem Sie auswählen X .