Bearbeiten Sie Komponenten

Bearbeiten Themengenerator Einzelne Komponenten, die besser zu Ihrer Marke passen und die Compliance-Standards für Barrierefreiheit erfüllen. Die Design-Hooks, die Sie bearbeiten können, sind für jeden Komponententyp spezifisch.

Vorbereitungen

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

Die Komponenten, die Sie in bearbeiten können Themengenerator Wurden in erstellt ServiceNow AI Platform Design System. Weitere Informationen finden Sie unter Next Experience-Komponenten Auf der ServiceNow Entwickler-Site.

Für Anweisungen zum Bearbeiten von Zentrale Navigation Komponente, siehe Richten Sie sich an Ihrer Marke aus, indem Sie verwenden Zentrale Navigation Komponente.

Die Gesamtzahl der Verstöße gegen Barrierefreiheit wird auf dem roten nummerierten Abzeichen-Symbol angezeigt Neben dem Inspektorbereich für Barrierefreiheit.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > Designs > Themengeneratoran.
   Die Zielseite des Themengenerators wird in der Homepage-Ansicht angezeigt.
2. Verwenden Sie die Dropdown-Liste Seite, um die Seitenansicht Editor auszuwählen.

   Abbildung : 1. Dropdown-Liste „Seite“

   

3. Wählen Sie in der Dropdown-Liste Design das Design aus, für das Sie Komponenten bearbeiten möchten.
4. Wählen Sie auf der Seitenansicht Editor die aus Komponentenstile Registerkarte.
   Die Komponentenstile werden grafisch aufgelistet.

   

5. Wählen Sie aus Wird Bearbeitet Registerkarte.

   

   Hinweis:

   Die Komponenten, die bearbeitet werden können, werden angezeigt. Informationen zum Filtern der Liste der Komponenten, um die Komponente zu finden, die Sie bearbeiten möchten, finden Sie unter Vorschau der Komponenten anzeigen.
6. Wählen Sie die Komponente aus, die Sie bearbeiten möchten, um auf den Bereich „konfigurierbarer Stil“ zuzugreifen.
   Wenn Sie sich die auf der Seite „Bearbeitung“ aufgeführten Komponenten ansehen, beachten Sie, dass einige Komponenten möglicherweise das folgende Symbol anzeigen.

   

   Hinweis:

   Das Warnsymbol für Barrierefreiheit gibt an, dass der Farbkontrast der ausgewählten Komponente nicht den Richtlinien für Barrierefreiheit (Web Content Accessibility Guidelines, WCAG) 2,1 für Barrierefreiheitsstandards für Farbkontrast entspricht. Informationen zum Bearbeiten von Komponenten mit Verstößen gegen die Barrierefreiheit finden Sie unter Passen Sie eine Komponente an, um Barrierefreiheitsstandards zu erfüllen.
7. Bearbeiten Sie im Bereich „konfigurierbarer Stil“ die Design-Hooks, die für die ausgewählte Komponente verfügbar sind, nach Bedarf.

   Abbildung : 2. Konfigurierbarer Stilbereich

   

   Die bearbeitbaren Designhaken, die verfügbar sind, hängen vom Typ der ausgewählten Komponente ab. Wenn Sie beispielsweise eine Abzeichenkomponente auswählen, können Sie die Farben und Zugänglichkeitshaken für das Abzeichen bearbeiten. Wenn Sie eine Textlink-Komponente auswählen, können Sie die Basisfarbe und die Haken für Barrierefreiheit bearbeiten.

   Hinweis:

   Nachdem Sie die komponentenspezifischen Hooks aktualisiert haben, wirken sich alle Änderungen, die Sie an globalen Stilen vornehmen, nicht auf Ihre Komponentenbearbeitungen aus. Komponentenspezifische Stile haben Vorrang vor global definierten Stilen.
8. Wenn Sie eine zu bearbeitende Farbe auswählen, wird die Farbauswahl geöffnet.

   Abbildung : 3. Farbauswahl

   

   Hinweis:

   Standardmäßig zeigt die Farbauswahl alle verfügbaren Farben für die Komponente an. Sie können den Schieberegler „nicht zugängliche Auswahlmöglichkeiten ausblenden“ auswählen, um die Farbauswahl auf die Farben zu beschränken, die als zugänglich identifiziert wurden, basierend auf den Richtlinien für Web Content Accessibility Guidelines (WCAG).
9. Wenn Sie die Farbänderungen abgeschlossen haben, wählen Sie aus Speichern Sie die Änderungen .
10. Wenn Sie eine zu bearbeitende Form auswählen, verwenden Sie die modalen Auswahlelemente, um die Rahmenbreite und den Eckenradius auszuwählen.
11. Wenn Sie Ihre Formänderungen abgeschlossen haben, wählen Sie aus Speichern Sie die Änderungen .
12. Wenn Sie eine Schriftartfamilie oder eine Schriftartfläche auswählen, die bearbeitet werden soll, wird das modale Auswahlelement geöffnet.

    Abbildung : 4. Modales Element „Schriftartfamilie bearbeiten“

    

    Hinweis:

    Wenn Sie eine anwenderdefinierte Schriftart hochgeladen haben, wird sie im Modal zur Auswahl angezeigt. Sie können eine anwenderdefinierte Schriftart auch direkt aus dem Auswahlmodal hochladen, sodass sie für Ihr Design verfügbar ist. Weitere Informationen finden Sie unter Laden Sie eine anwenderdefinierte Schriftart in Ihr Design hoch.
13. Wenn Sie Ihre Schriftartänderungen abgeschlossen haben, wählen Sie aus Speichern Sie die Änderungen .
14. Wahlweise: Wählen Sie das Rückgängig-Symbol Um Ihre Schriftart bei Bedarf auf Quell-Sans Pro zurückzusetzen.
15. Greifen Sie auf den Komponenteneditor zu, in dem Sie verschiedene Aspekte einer Komponente mithilfe einer der beiden aufgeführten Möglichkeiten stylen können:
    • Doppelklicken Sie auf die Komponentenkachel.
    • Wählen Sie entweder aus Stilinteraktionen , Stilunterkomponenten , Oder Stilvarianten Schaltfläche im Bereich „konfigurierbare Stile“, je nachdem, was für diese bestimmte Komponente verfügbar ist.
      Hinweis:

      Nicht alle Komponenten enthalten bearbeitbare Teile.

      Abbildung : 5. Komponenteneditor

      

16. Wählen Sie im Komponenteneditor die Interaktion, die Variante oder die Unterkomponente der ausgewählten Komponente aus, und bearbeiten Sie dann die verfügbaren Design-Hooks.
    Hinweis:

    Nachdem Sie die Änderungen an einem der Farbhaken gespeichert haben, wird das Symbol „Überschreibung entfernen“ angezeigt. Mit dem Symbol „Überschreibung entfernen“ können Sie Ihre Farbänderungen auf die ursprünglichen automatisch generierten Farben zurücksetzen.

    

17. Wahlweise: Kehren Sie über die Links im Navigationspfad zum Bildschirm Komponentenübersicht zurück.

    Abbildung : 6. Breadcrumb-Navigation für Komponentenbearbeitung

    

Ergebnisse

Wenn Ihr Design veröffentlicht wird, sind Ihre Komponentenbearbeitungen für Anwender sichtbar, deren Design bei der Aktualisierung angewendet wird. Informationen zum Veröffentlichen Ihres Designs finden Sie unter Veröffentlichen Sie Ihre Designs mit Themengenerator.