Ändern Sie die Standarddarstellung von Komponenten

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

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

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Warum und wann dieser Vorgang ausgeführt wird

Diese Aufgabe beschreibt das Hinzufügen von Stilen zu Komponenten und Wrappern (z. B. Text, Spaltenlayouts oder eine Spalte), 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 Verwalten Sie den visuellen Stil von UI Builder-Experiences.

Diese Aufgabe gilt für das neue Layoutsystem, das in Washington DCeingeführt wurde. Wenn Ihre Seite das alte Layoutsystem verwendet, finden Sie weitere Informationen unter Fügen Sie einer Komponente mithilfe des alten Layoutsystems Stile hinzu.

Hinweis:

Wenn Sie Komponenten auf der Seite hinzufügen und konfigurieren, zeigt die Phase Ihre Arbeit. Wenn Sie Änderungen vornehmen und die Aktualisierungen nicht in die Phase geladen werden, wählen Sie das Menüsymbol „Öffnen“ und dann Entwickler > Neu laden der Phase erzwingen. Beim erneuten Laden der Phase werden Ihre Änderungen angezeigt, aber nicht gespeichert. Um Ihre Arbeit zu speichern, wählen Sie oben rechts Speichern aus.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenauswählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante.
   Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter Seiten in UI Builder erstellen.
4. Wählen Sie im Inhaltsbereich eine Komponente oder einen Wrapper (z. B. Text, ein Spaltenlayout oder eine Spalte) aus, für die Sie einen Stil hinzufügen möchten.
5. Wählen Sie für Text oder eine Komponente im Konfigurationsbereich die Registerkarte Stile aus.
   
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 Einbindung von ARIA-Überschriften an. Ausführliche Informationen finden Sie in der ARIA-Dokumentation auf 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 oder auf der Registerkarte Benutzerdefiniert aus, auf der Sie eine beliebige Farbe in HEX, RGB oder HSL angeben können.

   

   Rahmen (Spaltenlayout, Spalte und Komponente)

   Fügt einen Rahmen um den Inhalt hinzu. Der Rahmen wird direkt am Rand und unmittelbar außerhalb der Auffüllung platziert. Geben Sie die Rahmenstärke, den Typ, die Farbe und die Eckenform an. Für Komponenten haben Sie die Möglichkeit, benutzerdefiniertes CSS für den Rahmen zu verwenden.

   

   Layout (Text, Spaltenlayout und Spalte)

   Gibt für Text und Spalte Richtung, Ausrichtung und Inhaltsausrichtung an. Gibt für das Spaltenlayout die Anzahl der Spalten und den Spaltenabstand (Abstand zwischen Spalten) an.

   Schatten (Spaltenlayout, Spalte und Komponente)

   Fügt Schatteneffekte um den Inhalt hinzu. Sie haben die Möglichkeit, benutzerdefiniertes 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 einem benutzerdefinierten Wert). Dieser Wert ist relevant, wenn die Größe des Browserfensters geändert wird.

   

   Abstand (Text, Spaltenlayout und Komponente)

   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 Auffüllung aus, um für alle vier Seiten dieselbe Größe festzulegen.

   

   Sie können die Größe für jeden Rand oder jede Auffüllungsseite festlegen, indem Sie die aktuelle Einstellung auswählen und dann eine Option auswählen.

   

7. Wahlweise: Für Text und Komponenten können Sie den CSS-Code bearbeiten, indem Sie unten auf der Registerkarte Stile auf den Link CSS anzeigen und bearbeiten klicken.
   Die Registerkarte Stile zeigt einen Code-Editor für CSS-Stile an. Die folgenden CSS-Eigenschaften werden am häufigsten verwendet:

   • Hintergrundfarbe
   • Hintergrundbild
   • Rahmenstil
   • Rahmenbreite
   • Rahmenfarbe
   • Rahmenradius
   • Box-Shadow
   • height
   • Min. Höhe
   • maximale Höhe
   • Rand
   • Überlauf
   • Abstand
   • width
   • Mindestbreite
   • maximale Breite
   • z-Index

   

   Wichtig:

   Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie in UI Buildernicht mit CSS überschreiben können. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter Verwalten Sie den visuellen Stil von UI Builder-Experiences.
8. Wählen Sie im Hauptheader Speichern aus, um Ihre Änderungen zu speichern.

Fügen Sie einer Komponente mithilfe des alten Layoutsystems 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

In dieser Aufgabe wird beschrieben, 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 einzufügen. Der Wrapper Ihrer Komponente befindet sich eine Ebene höher als die Komponente in der Inhaltshierarchie und wird standardmäßig als Maingekennzeichnet.

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 Verwalten Sie den visuellen Stil von UI Builder-Experiences.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante.
   Weitere Informationen zum Erstellen einer Seite in UI Builder finden Sie unter Seiten 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 ein Styling 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 verwendet, um Stile für Komponenten in Containern anzuwenden:

   • Hintergrundfarbe
   • Hintergrundbild
   • Rahmenstil
   • Rahmenbreite
   • Rahmenfarbe
   • Rahmenradius
   • Box-Shadow
   • height
   • Min. Höhe
   • maximale Höhe
   • Rand
   • Überlauf
   • Abstand
   • width
   • Mindestbreite
   • maximale Breite
   • z-Index

   Wichtig:

   Einige Komponenten enthalten integrierte Stilkonfigurationen, die Sie in UI Buildernicht mit CSS überschreiben können. Informationen zum Überschreiben dieser Stilkonfigurationen finden Sie unter Verwalten Sie den visuellen Stil von UI Builder-Experiences.
6. Wählen Sie im Hauptheader Speichern aus, um Ihre Änderungen zu speichern.

   Abbildung : 1. Stile zu Komponenten im Stilkonfigurationsbereich hinzufügen