Ändern Sie die Standarddarstellung von Komponenten

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

    • Legen Sie die Stile für Komponenten und Wrapper fest, um die Standarddarstellung zu ändern.

    Dieses Video zeigt Ihnen, wie Sie den folgenden Eingriff durchführen.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    In dieser Aufgabe wird beschrieben, wie Komponenten und Wrapper (z. B. Textkörper, Spaltenlayouts oder eine Spalte) Stile hinzugefügt werden, die Komponenten enthalten. Passen Sie den Komponentenstil an, indem Sie die Komponente in der Inhaltsstruktur auswählen, oder wenden Sie Stile auf mehrere Komponenten an, indem Sie Komponenten in einem Wrapper platzieren.

    Informationen zum Hinzufügen von Stilen zu Ihrer gesamten Experience finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.

    Diese Aufgabe gilt für das neue Layoutsystem, das in eingeführt wurde Zurich. Wenn Ihre Seite das alte Layoutsystem verwendet, finden Sie unter Fügen Sie einer Komponente mithilfe des alten Layoutsystems einen Stil hinzuFür weitere Informationen.

    Hinweis:
    Wenn Sie Komponenten auf der Seite hinzufügen und konfigurieren, zeigt die Phase Ihre Arbeit. Wenn Sie Änderungen vornehmen und die Updates nicht in der Phase geladen werden, wählen Sie aus Öffnen Sie das Menü Symbol und dann auswählen Entwickler > Phase Neu Laden . Beim erneuten Laden der Phase werden Ihre Änderungen angezeigt, sie werden jedoch nicht gespeichert. Wählen Sie aus, um Ihre Arbeit zu speichern Speichern Oben rechts.

    Experience-Ansicht mit ausgewähltem Menü „Öffnen“ mit den Optionen „Entwickler“ und „Phase neu laden“.

    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 oder öffnen Sie eine Seite oder Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter Erstellen Sie eine Seite in UI Builder .
    4. Wählen Sie im Inhaltsbereich eine Komponente oder einen Wrapper (z. B. Text, ein Spaltenlayout oder eine Spalte) aus, für die Sie ein Stil hinzufügen möchten.
    5. Wählen Sie für Textkörper oder eine Komponente aus Stile Registerkarte im Konfigurationsbereich.
      Registerkarte „Stile des Konfigurationsbereichs“.
    6. Verwenden Sie die visuellen Darstellungen für Stile Registerkarte, um zu entscheiden, was am besten für das Erscheinungsbild Ihrer Seite geeignet ist.
      Barrierefreiheit (Spaltenlayout und Spalte)
      Gibt Einstellungen für Barrierefreiheit an, z. B. ARIA-Regionsname, Überschriftenebene der ARIA-Region, ARIA-Rolle und Aufnahme der ARIA-Überschrift. Detaillierte Informationen finden Sie in der ARIA-Dokumentation unter developer.servicenow.com .
      Ausrichtung (Spalte und Komponente)
      Definiert für eine Spalte, wie Komponenten innerhalb der Spalte als Gruppe ausgerichtet werden. Definiert für eine Komponente, wie die Komponente innerhalb des übergeordneten Layoutelements ausgerichtet ist, z. B. in einem Spalten- oder Spaltenlayout.
      Hintergrund (Textkörper, Spaltenlayout, Spalte und Komponente)
      Legt die Hintergrundfarbe hinter dem Layoutelement fest. Wählen Sie eine Farbe aus der Farbauswahl aus Meine Farben Registerkarte, auf der Sie verfügbare Farben in einem Raster oder einer Liste anzeigen können. Alternativ können Sie verwenden Anwenderdefiniert Registerkarte, um eine beliebige Farbe in HEX, RGB oder HSL anzugeben.
      Hintergrundfarboptionen auf der Registerkarte „Liste“.
      Rahmen (Spaltenlayout, Spalte und Komponente)
      Fügt einen Rahmen um den Inhalt hinzu. Der Rahmen wird direkt innerhalb des Rands und unmittelbar außerhalb des Auffüllens platziert. Geben Sie die Rahmenstärke, den Typ, die Farbe und die Eckform an. Für Komponenten haben Sie die Möglichkeit, anwenderdefinierte CSS für den Rahmen zu verwenden.
      Rahmenoption erweitert mit Optionen für Dicke, Typ, Farbe und Eckform.
      Layout (Textkörper, Spaltenlayout, Spalte und Komponente)
      Gibt für Textkörper und Spalte Richtung, Ausrichtung und Inhaltsbegründung an. Gibt für das Spaltenlayout die Anzahl der Spalten und den Spaltenabstand (Abstand zwischen Spalten) an. Wählen Sie für einige Komponenten, z. B. Kartenbasiscontainer, aus Bearbeiten Sie CSS Zum Anwenden bestimmter CSS-Stile auf die Containerebene und auf die interne Ebene, die Komponenten im Container steuert.

      Bearbeiten Sie das Modal „CSS-Stile“ mit Stiloptionen für Container und Layoutstilen für Komponenten im Container.

      Schatten (Spaltenlayout, Spalte und Komponente)
      Fügt Schatteneffekte um den Inhalt hinzu. Sie haben die Möglichkeit, anwenderdefinierte CSS zu verwenden.
      Größenanpassung (Komponente)
      Legt für anwendbare Komponenten die Standard-, Mindest- und maximale Höhe und Breite für die Komponente fest (in px, %, em, Rem oder einem anwenderdefinierten Wert). Dieser Wert ist relevant, wenn die Größe des Browserfensters geändert wird.
      Größenanpassungsoption erweitert, um Breiten- und Höhenoptionen anzuzeigen.
      Abstand (Textkörper, Spaltenlayout und Komponente)
      Rand legt die Größe des Bereichs direkt im Textkörper, im Spaltenlayout oder in der Komponente fest. Durch die Auffüllung wird die Größe des Bereichs direkt außerhalb des Textkörpers, des Spaltenlayouts oder der Komponente festgelegt. Wählen Sie Rand oder Abstand aus, um die gleiche Größe für alle vier Seiten festzulegen.
      Optionen für Rand- und Auffüllabstand.
      Sie können die Größe für jeden Rand oder jede Auffüllseite festlegen, indem Sie die aktuelle Einstellung auswählen und dann eine Option auswählen.

      Abstandsoption mit Rand- und Auffülleinstellungen für alle vier Seiten des Textkörpers, des Spaltenlayouts oder der Komponente.

    7. Wahlweise: Für Textkörper und Komponenten können Sie den CSS-Code bearbeiten, indem Sie auswählen Zeigen Sie CSS an, und bearbeiten Sie sie Link unten in Stile Registerkarte.
      Die Registerkarte „Stile“ Zeigt an CSS-Stile Code-Editor. Die folgenden CSS-Eigenschaften werden am häufigsten verwendet:
      • Hintergrundfarbe
      • Hintergrundbild
      • Rahmenstil
      • Rahmenbreite
      • Rahmenfarbe
      • Rahmenradius
      • Box-Schatten
      • height
      • Min. Höhe
      • max. Höhe
      • Marge
      • Überlauf
      • Auffüllung
      • width
      • Min. Breite
      • max. Breite
      • z-Index
      CSS-Stilcode-Editor.
      Wichtig:
      Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie nicht mit CSS in überschreiben können UI Builder. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.
    8. Wählen Sie im Hauptheader aus Speichern Um Ihre Änderungen zu speichern.

    Fügen Sie einer Komponente mithilfe des alten Layoutsystems einen Stil hinzu

    Legen Sie CSS-Stile für eine Komponente fest, um ihre Standarddarstellung zu ändern.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    In dieser Aufgabe wird beschrieben, wie dem Wrapper, der Ihre Komponente enthält, Stile hinzugefügt werden. Dies wird im Allgemeinen empfohlen, anstatt Stile direkt auf die Komponente anzuwenden. Stellen Sie sicher, dass die Komponente, deren Stile Sie definieren möchten, in einer Containerkomponente platziert wird, um die Komponente in einem Wrapper zu platzieren. Der Wrapper Ihrer Komponente liegt eine Ebene höher als die Komponente in der Inhaltshierarchie und wird standardmäßig als bezeichnet Haupt .

    Um einer ganzen Seite Stile hinzuzufügen, können Sie standardbasierte CSS im Wrapper für die Seite verwenden. Informationen zum Hinzufügen von Stilen zu Ihrer gesamten Experience finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.

    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 oder öffnen Sie eine Seite oder Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter Erstellen Sie eine Seite in UI Builder .
      Hinweis:
      Eine Komponente muss in einem Container platziert werden, bevor Stile zur Komponente hinzugefügt werden.
    4. Wählen Sie den Container aus, der die Komponente enthält, der Sie den Stil hinzufügen möchten.
      Der Container liegt normalerweise eine Ebene höher als die Komponente in der Inhaltsstruktur.
      Die Registerkarte „Stile“ wird im Konfigurationsbereich angezeigt.
    5. Geben Sie im Fenster CSS-Stile standardbasierte CSS-Eigenschaften und -Werte ein.
      Die folgenden CSS-Eigenschaften werden am häufigsten verwendet, um Stile für Komponenten in Containern anzuwenden:
      • Hintergrundfarbe
      • Hintergrundbild
      • Rahmenstil
      • Rahmenbreite
      • Rahmenfarbe
      • Rahmenradius
      • Box-Schatten
      • height
      • Min. Höhe
      • max. Höhe
      • Marge
      • Überlauf
      • Auffüllung
      • width
      • Min. Breite
      • max. Breite
      • z-Index
      Wichtig:
      Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie mit CSS in nicht überschreiben können UI Builder. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.
    6. Wählen Sie im Hauptheader aus Speichern Um Ihre Änderungen zu speichern.
      Abbildung : 1. Fügen Sie einer Komponente in der Konfiguration „Stile“ einen Stil hinzu Bereich
      Registerkarte „Stile“ – Option „CSS-Stile“, die verwendet werden kann, um dem Textkörper oder einer Komponente mithilfe standardbasierter CSS Stile hinzuzufügen.