Ändern Sie die Standarddarstellung von Komponenten

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 5 Minuten Lesedauer

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

    In diesem Video erfahren Sie, wie Sie das folgende Verfahren durchführen.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Diese Aufgabe beschreibt, wie Sie Stile zu Komponenten und Wrappern (z. B. Textkörper, Spaltenlayouts oder eine Spalte) hinzufügen, die Komponenten enthalten. Passen Sie die Formatierung von Komponenten an, indem Sie die Komponente in der Inhaltsstruktur auswählen, oder wenden Sie Formate 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 Yokohamaeingeführt wurde. Wenn Ihre Seite das alte Layoutsystem verwendet, finden Sie weitere Informationen unter Fügen Sie einer Komponente mit dem alten Layoutsystem Stile hinzu.

    Hinweis:
    Während Sie auf der Seite Komponenten 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 das Menüsymbol Öffnen und dann Entwickler > Phase neu ladenaus. Wenn Sie die Phase neu laden, werden Ihre Änderungen zwar angezeigt, aber nicht gespeichert. Um Ihre Arbeit zu speichern, wählen Sie oben rechts Speichern.

    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, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter Seite in UI Builder erstellen.
    4. Wählen Sie im Bereich Inhalt eine Komponente oder einen Wrapper (z. B. Text, ein Spaltenlayout oder eine Spalte) aus, für die Sie Formatierung hinzufügen möchten.
    5. Für den Textkörper oder eine Komponente wählen Sie im Konfigurationsbereich die Registerkarte Stile.
      Registerkarte Stile des Konfigurationsbereichs.
    6. Verwenden Sie die visuellen Darstellungen auf der Registerkarte Stile, um zu entscheiden, was für das Erscheinungsbild Ihrer Seite am besten geeignet ist.
      Barrierefreiheit (Spaltenlayout und Spalte)
      Gibt Eingabehilfeeinstellungen wie ARIA-Regionsname, ARIA-Regionsüberschriftsebene, ARIA-Rolle und Einbeziehung der ARIA-Überschrift an. Ausführliche 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 wird, z. B. eine Spalte oder ein Spaltenlayout.
      Hintergrund (Text, Spaltenlayout, Spalte und Komponente)
      Legt die Hintergrundfarbe hinter dem Layoutelement fest. Wählen Sie eine Farbe auf der Registerkarte „Meine Farben“ der Farbauswahl aus, auf der Sie die verfügbaren Farben in einem Raster oder einer Liste anzeigen können. Verwenden Sie alternativ die Registerkarte Anwenderdefiniert, 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 Abstands platziert. Legen Sie Rahmenstärke, Typ, Farbe und Form der Ecken fest. Für Komponenten können Sie anwenderdefiniertes CSS für den Rahmen verwenden.
      Rahmenoption erweitert mit Optionen für Stärke, Typ, Farbe und Eckform.
      Layout (Text, Spaltenlayout, Spalte und Komponente)
      Gibt für Textkörper und Spalte die 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, wie z. B. Kartenbasis-Container, CSS bearbeiten aus, um bestimmte CSS-Stile auf die Containerebene und die internen Ebenen anzuwenden, die Komponenten im Container steuern.

      Modales Element „CSS-Stile“ mit Stiloptionen für Container und Layoutstilen für Komponenten im Container bearbeiten.

      Schatten (Spaltenlayout, Spalte und Komponente)
      Fügt Schatteneffekte um den Inhalt hinzu. Sie haben die Möglichkeit, anwenderdefiniertes CSS zu verwenden.
      Größenanpassung (Komponente)
      Legt für entsprechende Komponenten die standardmäßige, minimale und maximale Höhe und Breite für die Komponente fest (in px, % em, rem oder ein anwenderdefinierter Wert). Dieser Wert ist relevant, wenn die Größe des Browserfensters geändert wird.
      Größenoption erweitert um Optionen für Breite und Höhe erweitert.
      Abstand (Textkörper, Spaltenlayout und Komponente)
      Der Rand legt die Größe des Bereichs direkt am inneren Rand des Textkörpers, des Spaltenlayouts oder der Komponente fest. Die Auffüllung legt die Größe des Bereichs direkt am äußeren Rand des Textkörpers, des Spaltenlayouts oder der Komponente fest. Wählen Sie Rand oder Abstand, um für alle vier Seiten dieselbe Größe festzulegen.
      Optionen für Rand- und Abstandsabstände.
      Sie können die Größe für jede Rand- oder Abstandsseite festlegen, indem Sie die aktuelle Einstellung und dann eine Option auswählen.

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

    7. Wahlweise: Für Text und Komponenten können Sie den CSS-Code bearbeiten, indem Sie unten auf der Registerkarte Stile den Link CSS anzeigen und bearbeiten auswählen.
      Auf der Registerkarte „Stile“ wird ein Code-Editor für CSS-Stile angezeigt. Die folgenden CSS-Eigenschaften werden am häufigsten verwendet:
      • Hintergrundfarbe
      • Hintergrundbild
      • Rahmenstil
      • Rahmenbreite
      • Rahmenfarbe
      • Rahmenradius
      • Box-Shadow
      • height
      • Mindesthöhe
      • Max. Höhe
      • Rand
      • Überlauf
      • Auffüllung
      • width
      • Mindestbreite
      • max-width
      • z-Index
      Code-Editor für CSS-Stile.
      Wichtig:
      Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie nicht mit CSS in UI Builderüberschreiben können. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.
    8. Wählen Sie im Hauptheader Speichern aus, um Ihre Änderungen zu speichern.

    Fügen Sie einer Komponente mit dem alten Layoutsystem Stile 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

    Diese Aufgabe beschreibt, wie Sie dem Wrapper, der Ihre Komponente enthält, Stile hinzufügen. 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 ist, um die Komponente in einen Wrapper zu setzen. Der Wrapper Ihrer Komponente befindet sich eine Ebene höher als die Komponente in der Inhaltshierarchie und wird standardmäßig als Mainbezeichnet.

    Um einer ganzen Seite Stile hinzuzufügen, können Sie standardbasiertes 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, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
      Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
    3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter Seite in UI Builder erstellen.
      Hinweis:
      Eine Komponente muss in einem Container platziert werden, bevor der Komponente Stile hinzugefügt werden.
    4. Wählen Sie den Container aus, der die Komponente enthält, der Sie eine Formatierung hinzufügen möchten.
      Der Container befindet sich 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 für die Anwendung von Stilen für Komponenten in Containern verwendet:
      • Hintergrundfarbe
      • Hintergrundbild
      • Rahmenstil
      • Rahmenbreite
      • Rahmenfarbe
      • Rahmenradius
      • Box-Shadow
      • height
      • Mindesthöhe
      • Max. Höhe
      • Rand
      • Überlauf
      • Auffüllung
      • width
      • Mindestbreite
      • max-width
      • z-Index
      Wichtig:
      Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie nicht mit CSS in UI Builderüberschreiben können. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter Visuellen Stil von UI Builder-Experiences verwalten.
    6. Wählen Sie im Hauptheader Speichern aus, um Ihre Änderungen zu speichern.
      Abbildung : 1. Fügen Sie einer Komponente im Konfigurationsbereich „Stile “ einen Stil hinzu.
      Registerkarte „Stile“ Option „CSS-Stile“, mit der dem Textkörper oder einer Komponente mithilfe von standardbasiertem CSS Stile hinzugefügt werden können.