YouTube ChannelSchedule a CallSubscribe for Updates

Stil

Avonni Dynamic Components bieten umfangreiche Styling-Optionen, mit denen Sie das Erscheinungsbild Ihrer Komponenten an Ihre Marke anpassen und ein professionelles Benutzererlebnis schaffen können. Das Style-Panel ist Ihr zentraler Hub zur Verwaltung dieser Stile.

Übersicht

Jede Avonni-Komponente verfügt über eine Reihe von Standardstilen, die ihr Grundaussehen definieren. Sie können diese Stile auf zwei Arten anpassen:

  • Komponentenspezifisches Styling (Standardstil-Auswahl): Ändern Sie die Stile einer einzelnen, spezifischen Komponenteninstanz. Diese Änderungen werden nur

  • diese eine Komponente betreffen. Wiederverwendbare benutzerdefinierte Stile: Erstellen Sie benannte benutzerdefinierte Stil-Selectoren die eine Reihe von Stilattributen definieren. Sie können dann diese

auf mehrere Komponenten anwenden, um Konsistenz zu gewährleisten und Stilaktualisierungen global zu erleichtern.

Position des Style-Panels

Die Style-Registerkarte

  • Die Style-Registerkarte befindet sich auf der rechten Seite des Component Builders, wenn Sie eine Avonni-Komponente auswählen. Sie enthält: Stilattributen:

  • Eine Liste von Attributen, die Sie anpassen können, um das Erscheinungsbild der Komponente zu verändern (z. B. Farben, Schriftarten, Abstände). Style-Selector:

Ein Menü, in dem Sie benutzerdefinierte CSS-Klassen für die Komponente erstellen und anwenden können.

Komponentenspezifisches Styling (Standardstil) Wenn Sie eine Komponente zur Arbeitsfläche hinzufügen, verwendet sie den "Standard"-Stil. Wenn Sie Stilattribute (z. B. Farbe, Schriftgröße, Innenabstand) ändernwährend der "Standard"-Stil ausgewählt ist werden , wirken sich diese Änderungen auf diese spezifische Instanz

der Komponente aus.

  1. Beispiel

  2. Sie fügen eine Button-Komponente hinzu.

  3. Sie wählen die Button-Komponente aus.

  4. Sie sehen, dass im Style-Panel "Standard" ausgewählt ist.

  5. Sie ändern die Hintergrundfarbe des Buttons im Properties-Panel auf Rot. Nur dieser spezifische Button

wird einen roten Hintergrund haben. Andere Button-Komponenten behalten ihr Standardaussehen.

Dies ist nützlich für einmalige Anpassungen.

Erstellen und Verwenden wiederverwendbarer benutzerdefinierter Stile

  1. Um wiederverwendbare Stile zu erstellen, die Sie auf mehrere Komponenten anwenden können: Wählen Sie eine Komponente: Wählen Sie beliebige

  2. Komponente auf der Arbeitsfläche. Es spielt keine Rolle, welche Komponente Sie zuerst auswählen. Öffnen Sie das Style-Panel:

  3. Gehen Sie zum Style-Panel.

    1. Um einen neuen Stil zu erstellen Gehen Sie zum Style-Selector:

    2. Dieser befindet sich in der Style-Registerkarte des Component Builders. Benennen Sie Ihren Stil:

    3. Geben Sie ihm einen eindeutigen Namen, der seinen Zweck beschreibt (z. B. RedMetric, PrimaryButton). Erstellen Sie den Stil: Klicken Sie auf die + Erstellen "[styleName]"

  4. Schaltfläche, um die benutzerdefinierte CSS-Klasse zu erzeugen.

    • Passen Sie die Stilattribute an Mit Ihrem neuen benutzerdefinierten Stil ausgewählt (markiert) im Style-Panel, verwenden Sie das Properties-Panel um die Stilattribute deraktuell ausgewählten Komponente

    • . Zum Beispiel könnten Sie die Hintergrundfarbe, Schriftgröße, den Rand, den Innenabstand usw. ändern. Wichtig: Die Änderungen, die Sie hier vornehmen, werden imbenutzerdefinierten Stil

  5. gespeichert, nicht nur in der einzelnen Komponente, die Sie zuerst ausgewählt haben.

    • Wenden Sie den Stil auf andere Komponenten an Wählen Sie eine andere Komponente auf der Arbeitsfläche (vom gleichen Typ

    • wie die Komponente, die Sie zur Erstellung des Stils verwendet haben – Sie können einen Button-Stil auf einen anderen Button anwenden, aber nicht auf eine Daten-Tabelle).

    • Im Style-Panel sehen Sie Ihren benutzerdefinierten Stil aufgelistet.

    • Klicken Sie im Properties-Panel auf das Stilattribut

  6. Wählen Sie Ihren benutzerdefinierten Stil aus, um ihn auf die ausgewählte Komponente anzuwenden.

    • Angewendete Stile anzeigen

Sie können Komponenten, die Stile aus dem Style-Panel verwenden, auch direkt visualisieren. Jetzt teilen Jetzt alle

Komponenten, denen Sie diesen benutzerdefinierten Stil zugewiesen haben, dasselbe Erscheinungsbild. Wenn Sie den benutzerdefinierten Stil später bearbeiten,

  1. werden Komponenten, die diesen Stil verwenden, automatisch aktualisiert.

  2. Beispiel: Wiederverwendbarer "RedMetric"-Stil

  3. Fügen Sie eine Metric-Komponente zu Ihrer Arbeitsfläche hinzu.

  4. Öffnen Sie das Style-Panel. Klicken Sie auf die "+"- (oder "Neuer Stil")-Schaltfläche, um einen neuen Stil zu erstellen..

  5. Benennen Sie den Stil Klicken Sie auf die "+"- (oder "Neuer Stil")-Schaltfläche, um einen neuen Stil zu erstellen. RedMetric Mit dem Stil

  6. ausgewählt

  7. im Style-Panel, wählen Sie die Metric-Komponente aus.

  8. Ändern Sie die Hintergrundfarbe der Metric-Komponente auf Rot (mithilfe des Properties-Panels).

  9. Fügen Sie eine weitere Metric-Komponente zu Ihrer Arbeitsfläche hinzu. Klicken Sie auf die "+"- (oder "Neuer Stil")-Schaltfläche, um einen neuen Stil zu erstellen. Klicken Sie auf diese Komponente und wählen Sie dann das Stilattribut aus.

Wählen Sie Ihren benutzerdefinierten Klicken Sie auf die "+"- (oder "Neuer Stil")-Schaltfläche, um einen neuen Stil zu erstellen. Stil. Jetzt haben beide Metric-Komponenten einen roten Hintergrund. Wenn Sie später die im Stil (im Style-Panel) definierte Hintergrundfarbe ändern,

Speichern und testen Sie. Ein Klick auf die Schaltfläche in einer Zeile der Datentabelle sollte nun Ihren Screen Flow in einem Panel anzeigen, sodass der Benutzer den Status des Kontakts direkt im Kontext der Datentabelle aktualisieren kann.

  • werden sich beide Metric-Komponenten automatisch aktualisieren. Stilbereich: Derzeit sind benutzerdefinierte Stile auf dieeinzelne

  • Dynamic Component beschränkt, in der sie erstellt werden. Sie werden nicht zwischen verschiedenen Dynamic Components geteilt. Jedoch Wählen Sie eine andere Komponente auf der Arbeitsfläche (vom Kompatibilität nach Komponententyp: Sie können einen benutzerdefinierten Stil nur auf Komponenten desselben Typs anwenden

  • wie die Komponente, die Sie zur Erstellung des Stils verwendet haben. Sie können einen Button-Stil nicht auf eine Daten-Tabelle anwenden. Stile überschreiben:

  • Sie können einen benutzerdefinierten Stil

  • auf einer bestimmten Komponente überschreiben, indem Sie weitere Änderungen vornehmen, während der "Standard"-Stil ausgewählt ist. Dadurch wird eine komponentenspezifische Überschreibung erstellt. Stile löschen:

Tutorials

Wie fügen Sie Abstand oder einen Umbruch zwischen Abschnitten oder Feldern hinzu?

Berücksichtigen Sie das Layout Ihrer Dynamic Component und wie das Panel darin Platz findet.

Sie können benutzerdefinierte Stile im Style-Panel löschen. Seien Sie vorsichtig, da dies alle Komponenten beeinflusst, die diesen Stil verwenden.

Zuletzt aktualisiert

War das hilfreich?