Unterstützung von Farbvariablen für UI-Regeln

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 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 jede Farbvariable aus der Tabelle „UX-Designeigenschaften“ [sys_ux_theme_property] definieren. Eine Liste der verfügbaren Variablen finden Sie unten im Leitfaden für Farbdesign. Beispiel:

    {„BackgroundColorVariable“: „--now-color-secondary-3“, „BackgroundColor“: „#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
    Die Farben in 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
    Die Farben in einer gruppierten Farbpalette entsprechen den Farbkonventionen einer Branche. Verwenden Sie diese Farben, um anzuzeigen, dass das farbige Element einer bestimmten Branche oder Branche zugeordnet ist. Die Bedeutung der einzelnen Farben hängt vom Kontext ab, sollte jedoch innerhalb 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 Farbschema für Warnmeldungen
    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 Farbschema der Informationswarnung
    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 Warnung „Niedrig“.
    Mobile Variable
    alert--low-0
    Webvariable
    --now-color_alert--low-0
    Deaktiviert Deaktiviertes Warnungsfarbschema
    Mobile Variable
    alert-disabled-background
    Webvariable
    --now-color_background--secondary
    Kritisch (Alternativ) Alternatives Farbschema für kritische Warnungen
    Mobile Variable
    alert--critical-4
    Webvariable
    --now-color_alert--critical-4
    Hoch (Alternativ) Alternatives Farbschema für hohe Warnungen
    Mobile Variable
    alert--high-4
    Webvariable
    --now-color_alert--high-4
    Warnung (Alternative) Alternatives Farbschema für Warnmeldungen
    Mobile Variable
    alert--warning-4
    Webvariable
    --now-color_alert--warning-4
    Mittel (Alternativ) Alternatives Farbschema für moderate Warnungen
    Mobile Variable
    alert--moderate-4
    Webvariable
    --now-color_alert--moderate-4
    Info (Alternativ) Alternatives Farbschema für Infowarnung
    Mobile Variable
    alert--info-4
    Webvariable
    --now-color_alert--info-4
    Positiv (Alternativ) Alternatives Farbschema für positive Warnung
    Mobile Variable
    alert--positive-4
    Webvariable
    --now-color_alert--positive-4
    Niedrig (Alternativ) Alternatives Farbschema für niedrige Warnung
    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--tertiär
    Tabelle : 2. Gruppierte Farbpalette
    Farbname Beispiel Farboptionen
    Blau Blau gruppiertes Farbschema
    Webvariable
    --now-color_grouped--Blue-0
    Braun Braunes 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ün-Gelb Grün-gelbes gruppiertes Farbschema
    Webvariable
    --now-color_grouped--grün-gelb-0
    Magenta Blaues gruppiertes Farbschema
    Webvariable
    --now-color_grouped--magenta-0
    Orange Orange gruppiertes Farbschema
    Webvariable
    --now-color_grouped--range-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--Yellow-0
    Blau (Alternativ) Blau gruppiertes Farbschema alternativ
    Webvariable
    --now-color_grouped--Blue-4
    Braun (Alternativ) Alternatives Farbschema für Braun-Gruppierungen
    Webvariable
    --now-color_grouped--brown-4
    Grau (Alternativ) Alternatives Farbschema für Graugruppierungen
    Webvariable
    --now-color_grouped--gray-4
    Grün (Alternativ) Alternatives Grün gruppiertes Farbschema
    Webvariable
    --now-color_grouped--grün-4
    Grün-Gelb (Alternativ) Alternativ gruppiertes grün-gelbes Farbschema
    Webvariable
    --now-color_grouped--grün-gelb-4
    Magenta (Alternativ) Alternatives Farbschema für gruppiertes Magenta
    Webvariable
    --now-color_grouped--magenta-4
    Orange (Alternativ) Alternatives Farbschema für Orange-Gruppierungen
    Webvariable
    --now-color_grouped--range-4
    Pink (Alternativ) Alternatives Farbschema für gruppierte Rosa
    Webvariable
    --now-color_grouped--pink-4
    Lila (Alternativ) Alternatives Farbschema für lila Gruppen
    Webvariable
    --now-color_grouped--purple-4
    Blaugrün (Alternativ) Alternatives Farbschema für Blaugrün gruppiert
    Webvariable
    --now-color_grouped--teal-4
    Gelb (Alternativ) Alternatives Farbschema für Gelb gruppiert
    Webvariable
    --now-color_grouped--Yellow-4