Suporte de variável de cor para botões de exibição de cartão

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 1 min. de leitura
  • Saiba como usar variáveis de cor para alterar temas nos botões de exibição do cartão para celular.

    Use variáveis de cor em Atributos do elemento do modelo de cartão para controlar os valores de cor para botões de ícone em seus cartões para celular.

    As seguintes variáveis de cor estão disponíveis para uso:
    • Variable de cor de fundo
    • BorderColorVariable
    • TextColorVariable

    Para obter mais informações sobre esses atributos, consulte Atributos de elemento do modelo de cartão.

    Variável de cor usada em um elemento de modelo de exibição de cartão

    Guia de estilo de botão

    Cor Exemplo Variáveis
    Primário Exemplo de botão primário
    Plano de fundo

    Variável móvel: Primária

    Variável da web: now-color--primário-1

    Texto

    Variável móvel: Texto acionável

    Variável da web: now-color_text--primário-acionável

    Secundário(a) Exemplo de botão secundário
    Plano de fundo

    Variável móvel: Plano de fundo primário

    Variável da web: now-color_background--primário

    Texto

    Variável móvel: Primária

    Variável da web: now-color--primário-1

    Borda (2 px)

    Variável móvel: Primária

    Variável da web: now-color--primário-1

    Positivo Exemplo de botão positivo
    Plano de fundo

    Variável móvel: Positivo

    Variável da web: now-color_alert--positive-3

    Texto

    Variável móvel: Texto acionável

    Variável da web: now-color_text--primário-acionável

    Destrutivo Exemplo de botão destrutivo
    Plano de fundo

    Variável móvel: Destrutivo

    Variável da web: now-color_alert--critical-3

    Texto

    Variável móvel: Texto acionável

    Variável da web: now-color_text--primário-acionável

    Simples Exemplo de botão simples
    Plano de fundo

    Variável móvel: Primária / Positivo / Destrutivo

    Variável da web: now-color--primário-1 /

    now-color_alert--positive-3 /

    now-color_alert--critical-3

    Texto

    Variável móvel: Texto acionável

    Variável da web: now-color_text--primário-acionável

    Nota:
    Este botão pode ser configurado com cor primária, positiva ou destrutiva.
    Desativado Exemplo de botão desabilitado

    Use este estilo quando a ação estiver indisponível enquanto estiver off-line.

    Pode ser usado com todos os estilos: Primário, secundário, texto/ícone.