Unterstützung von Farbvariablen für UI-Regeln

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 1 Minute Lesedauer

    • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design in Ihren Mobile-UI-Regeln zu ändern.

    Verwenden Sie die folgenden Farbvariablen im Feld Wert Ihrer UI-Regeln, wobei das Feld Vorgang auf UI-Stilfestlegen festgelegt ist

    • HintergrundfarbeVariable
    • FontColorVariable außerhalb oder innerhalb des TextDecorators

    Sie können eine beliebige Farbvariable aus der Tabelle „UX-Designeigenschaften“ [sys_ux_theme_property] definieren. Eine Liste der verfügbaren Variablen finden Sie im Farbdesignleitfaden unten. Beispiel:

    {„HintergrundfarbeVariable“: „--now-color-secondary-3“, „Hintergrundfarbe“: „#3f2c11“}

    Weitere Informationen zum Erstellen dieser UI-Regelaktionen finden Sie unter Mobile UI-Regelaktionen erstellen.

    		 Farbvariable, die in einer UI-Aktion verwendet wird

    Mobile UI-Regelfarbleitfaden

    Farbvariablen sind unterteilt in Verwenden Sie die Designrichtlinie, um die richtige Farbvariable für Ihren Anwendungsfall zu identifizieren.

    Warnungsfarbpalette
    Farben der Warnungsfarbpalette heben wichtige Status, Status und Aufgaben hervor. Verwenden Sie Warnungsfarben, um eine bestimmte Bedeutung zu kommunizieren, und nicht zur Dekoration oder Organisation.
    Gruppierte Farbpalette
    Farben in gruppierten Farbpaletten folgen den Farbkonventionen in einer Branche. Verwenden Sie diese Farben, um anzuzeigen, dass das farbige Element einer bestimmten Branche oder Branche zugeordnet ist. Die Bedeutung jeder Farbe hängt vom Kontext ab, sollte jedoch in Ihrer App konsistent bleiben.
    Tabelle : 1. Warnungsfarbpalette
    Farbname Beispiel Farbvariablen
    Kritisch Farbschema für kritische Warnungen
    Mobile-Variable
    alert--critical-0
    Webvariable
    --now-color_alert--critical-0
    Hoch Farbschema für hohe Warnung
    Mobile-Variable
    alert--high-0
    Webvariable
    --now-color_alert--high-0
    Warnung Warnung Farbschema
    Mobile-Variable
    alert--warning-0
    Webvariable
    --now-color_alert--warning-0
    Mittel Farbschema für moderate Warnungen
    Mobile-Variable
    alert--moderate-0
    Webvariable
    --now-color_alert--moderate-0
    Info Infowarnungs-Farbschema
    Mobile-Variable
    alert--info-0
    Webvariable
    --now-color_alert--info-0
    Positiv Farbschema für positive Warnung
    Mobile-Variable
    alert--positive-0
    Webvariable
    --now-color_alert--positive-0
    Niedrig Farbschema für niedrige Warnung
    Mobile-Variable
    alert--low-0
    Webvariable
    --now-color_alert--low-0
    Deaktiviert Deaktiviertes Warnungsfarbschema
    Mobile-Variable
    Warnung-deaktiviert-Hintergrund
    Webvariable
    --now-color_background--secondary
    Kritisch (Alternativ) Kritische Warnung – Farbschema Alternative
    Mobile-Variable
    alert--critical-4
    Webvariable
    --now-color_alert--critical-4
    Hoch (Alternativ) Farbschema für hohe Warnungen wechselnd
    Mobile-Variable
    alert--high-4
    Webvariable
    --now-color_alert--high-4
    Warnung (Alternativ) Warnung Farbschema Alternative
    Mobile-Variable
    alert--warning-4
    Webvariable
    --now-color_alert--warning-4
    Moderat (Alternativ) Alternatives Farbschema für moderate Warnungen
    Mobile-Variable
    alert--moderate-4
    Webvariable
    --now-color_alert--moderate-4
    Info (Alternativ) Infowarnungs-Farbschema alternativ
    Mobile-Variable
    alert--info-4
    Webvariable
    --now-color_alert--info-4
    Positiv (Alternativ) Farbschema für positive Warnungen wechselnd
    Mobile-Variable
    alert--positive-4
    Webvariable
    --now-color_alert--positive-4
    Niedrig (Alternativ) Farbschema für niedrige Warnung – Alternative
    Mobile-Variable
    alert--low-4
    Webvariable
    --now-color_alert--low-4
    Deaktiviert (Alternative) Alternatives Farbschema für deaktivierte Warnungen
    Mobile-Variable
    alert-disabled-text
    Webvariable
    --now-color_text--tertiary
    Tabelle : 2. Gruppierte Farbpalette
    Farbname Beispiel Farboptionen
    Blau Blau gruppiertes Farbschema
    Webvariable
    --now-color_grouped--blue-0
    Braun Braun gruppiertes Farbschema
    Webvariable
    --now-color_grouped--brown-0
    Grau Grau gruppiertes Farbschema
    Webvariable
    --now-color_grouped--gray-0
    Grün Grün gruppiertes Farbschema
    Webvariable
    --now-color_grouped--grün-0
    Grüngelb Grün-gelb gruppiertes Farbschema
    Webvariable
    --now-color_grouped--grün-gelb-0
    Magenta Gruppiertes Farbschema in Magenta
    Webvariable
    --now-color_grouped--magenta-0
    Orange Orange gruppiertes Farbschema
    Webvariable
    --now-color_grouped--orange-0
    Rosa Rosa gruppiertes Farbschema
    Webvariable
    --now-color_grouped--pink-0
    Lila Lila gruppiertes Farbschema
    Webvariable
    --now-color_grouped--purple-0
    Blaugrün Blaugrünes gruppiertes Farbschema
    Webvariable
    --now-color_grouped--teal-0
    Gelb Gelbes gruppiertes Farbschema
    Webvariable
    --now-color_grouped--gelb-0
    Blau (Alternativ) Blaues gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--blue-4
    Braun (Alternativ) Braun gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--brown-4
    Grau (Alternativ) Grau gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--gray-4
    Grün (Alternativ) Grün gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--grün-4
    Grün-Gelb (Alternativ) Grün-gelb gruppiertes Farbschema abwechselnd
    Webvariable
    --now-color_grouped--grün-gelb-4
    Magenta (Alternativ) Gruppiertes Farbschema in Magenta, Alternative
    Webvariable
    --now-color_grouped--magenta-4
    Orange (Alternativ) Orange gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--orange-4
    Rosa (Alternativ) Rosa gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--pink-4
    Lila (Alternativ) Lila gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--purple-4
    Blaugrün (Alternative) Gruppiertes Farbschema in Blaugrün, Alternative
    Webvariable
    --now-color_grouped--teal-4
    Gelb (Alternativ) Gelbes gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--gelb-4