Unterstützung von Farbvariablen für Kartenansichtsschaltflächen

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 1 Minute Lesedauer
  • Erfahren Sie, wie Sie Farbvariablen verwenden, um das Design der Schaltflächen für die Ansicht Ihrer mobilen Karten zu ändern.

    Verwenden Sie Farbvariablen in Kartenvorlagen-Elementattributen, um Farbwerte für Symbolschaltflächen auf Ihren Mobile-Karten zu steuern.

    Die folgenden Farbvariablen können verwendet werden:
    • HintergrundfarbeVariable
    • BorderColorVariable
    • TextColorVariable

    Weitere Informationen zu diesen Attributen finden Sie unter Kartenvorlagen-Elementattribute.

    Farbvariable, die in einem Kartenansichtsvorlagenelement verwendet wird

    Styleguide für Schaltflächen

    Farbe Beispiel Variablen
    Primär Beispiel für primäre Schaltfläche
    Hintergrund

    Mobile Variable: Primär

    Webvariable: now-color--primary-1

    Text

    Mobile Variable: Text umsetzbar

    Webvariable: now-color_text--primary-actionable

    Sekundär Beispiel für sekundäre Schaltfläche
    Hintergrund

    Mobile Variable: Hintergrund primär

    Webvariable: now-color_background--primary

    Text

    Mobile Variable: Primär

    Webvariable: now-color--primary-1

    Rahmen (2 px)

    Mobile Variable: Primär

    Webvariable: now-color--primary-1

    Positiv Beispiel für positive Schaltfläche
    Hintergrund

    Mobile Variable: Positiv

    Webvariable: now-color_alert--positive-3

    Text

    Mobile Variable: Text umsetzbar

    Webvariable: now-color_text--primary-actionable

    Destruktiv Beispiel für eine destruktive Schaltfläche
    Hintergrund

    Mobile Variable: destruktiv

    Webvariable: now-color_alert--critical-3

    Text

    Mobile Variable: Text umsetzbar

    Webvariable: now-color_text--primary-actionable

    Leer Beispiel: leere Schaltfläche
    Hintergrund

    Mobile Variable: Primär/Positiv/Destruktiv

    Webvariable: now-color--primary-1/

    now-color_alert--positive-3/

    now-color_alert--critical-3

    Text

    Mobile Variable: Text umsetzbar

    Webvariable: now-color_text--primary-actionable

    Hinweis:
    Diese Schaltfläche kann mit primärer, positiver oder destruktiver Farbe konfiguriert werden.
    Deaktiviert Beispiel für deaktivierte Schaltfläche

    Verwenden Sie diesen Stil, wenn die Aktion offline nicht verfügbar ist.

    Kann mit allen Stilen verwendet werden – primär, sekundär, Text/Symbol.