Vorschau der Komponenten anzeigen

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 1 Minute Lesedauer
  • Während Sie Ihr Design erstellen oder verwalten, können Sie eine Vorschau der Komponenten anzeigen, die für die Aufnahme in Ihre Instanz verfügbar sind.

    Vorbereitungen

    Erforderliche Rolle: Administrator

    Warum und wann dieser Vorgang ausgeführt wird

    Die Komponenten, in denen Sie eine Vorschau anzeigen können Themengenerator Wurden in Now erstellt Design System. Weitere Informationen finden Sie unter Next Experience-Komponenten Auf der ServiceNow Entwickler-Site.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > Designs > Themengeneratoran.
      Die Zielseite des Themengenerators wird in der Homepage-Ansicht angezeigt.
    2. Verwenden Sie Seite Dropdown-Liste zum Auswählen der Editor-Seitenansicht.
      Abbildung : 1. Dropdown-Liste „Seite“
      Dropdown-Liste „Seite“ mit ausgewähltem Editor.
    3. Wählen Sie aus Komponentenstile Registerkarte.
      Die Komponentenstile werden grafisch aufgelistet.
      Komponentenstile
    4. Sie können durch die Liste scrollen, um alle verfügbaren Komponenten anzuzeigen, oder die Liste filtern, um bestimmte Komponententypen anzuzeigen.
      1. Wählen Sie das Filtersymbol aus .
        Komponentenliste filtern und durchsuchen.
      2. Erweitern Sie die Kategorien der Komponenten, die Sie anzeigen möchten, und wählen Sie die spezifischen Komponenten in den Kategorien aus, die Sie anzeigen möchten.
        Hinweis:
        Um beispielsweise Komponenten für alle primären Schaltflächen anzuzeigen, erweitern Sie Schaltfläche Kategorie, und wählen Sie aus Primär , Primär positiv , Und Primär negativ Komponenten. Die Liste zeigt die von Ihnen ausgewählten Komponenten.
        Filterbeispiel
    5. Um zu testen, wie die Komponenten mit verschiedenen Hintergrundfarben gerendert werden, wählen Sie aus Canvas-Farbe Kontrollkästchen.
    6. Wählen Sie aus Hintergrundfarbe Sie möchten anzeigen und auswählen Anwenden .
      Abbildung : 2. Canvas-Farbe
      Canvas-Farbe
      Neue Hintergrundfarbe