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

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 1 min. de leitura

    • Aprenda a usar variáveis de cor para mudar o tema nos botões de exibição de cartão do Mobile.

    Use variáveis de cor em atributos de elemento de modelo de cartão para controlar valores de cor para botões de ícone em seus cartões móveis.

    As seguintes variáveis de cor estão disponíveis para uso:
    • VariávelCorDeFundo
    • 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 do 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--primary-1

    Texto

    Variável móvel: texto acionável

    Variável da web: now-color_text--primary-actionable
    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--primary

    Texto

    Variável móvel: primária

    Variável da web: now-color--primary-1

    Borda (2px)

    Variável móvel: primária

    Variável da web: now-color--primary-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--primary-actionable
    Destrutivo Exemplo de botão destrutivo
    Plano de Fundo

    Variável móvel: destrutiva

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

    Texto

    Variável móvel: texto acionável

    Variável da web: now-color_text--primary-actionable
    Simples Exemplo de botão simples
    Plano de Fundo

    Variável móvel: primária/positiva/destrutiva

    Variável da web: now-color--primary-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--primary-actionable

    Nota:
    Este botão pode ser configurado com cores primárias, positivas ou destrutivas.
    Desativado Exemplo de botão desabilitado

    Use este estilo quando a ação não estiver disponível off-line.

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