Dados Dinâmicos e Condicionais

Esta é a parte mais poderosa do editor, permitindo que seu layout reaja aos dados em tempo real (ex: alertas de doação, placares, metas). Acesse estas opções clicando na Engrenagem da camada ou em “Configurações Avançadas” no menu de contexto.

Data Binding (Vínculo de Dados)

Você pode tornar qualquer texto dinâmico inserindo variáveis entre chaves duplas \{\{ \}\}.

1. Edite o texto do elemento.
2. Digite \{\{nome_da_variavel\}\} ou use o menu de contexto para selecionar da lista.
3. Exemplo: “Obrigado {{usuario}} pelo donate de {{valor}}!”
   • Resultado: “Obrigado João pelo donate de R$ 50,00!”

Formatação de Dados

Na aba Formatação das configurações avançadas, defina como o dado bruto deve ser exibido.

• Texto (Padrão): Exibe exatamente como veio.
• Número/Moeda:
  • Decimal: 1000 -> 1.000,00
  • Moeda: 50 -> R$ 50,00 (Configurável).
  • Porcentagem: 0.5 -> 50%.
• Data: Transforma datas brutas (ISO) em formatos legíveis (ex: DD/MM/YYYY, HH:mm).
• Booleano (Lógico): Personalize o texto para Verdadeiro (ex: “Ativo”) e Falso (ex: “Offline”).

Regras Condicionais

Na aba Condicional, crie lógica para alterar o design baseada nos dados. “Se X acontecer, faça Y”.

1. Clique em Adicionar Regra.
2. Se (Propriedade): Escolha a variável (ex: valor_doacao).
3. Operador: Escolha a comparação (Igual, Maior que, Contém, etc.).
4. Valor: O valor de referência (ex: 100).
5. Ação:
   • Ocultar Elemento: O elemento desaparece.
   • Aplicar Estilo: Altera cores, fundo, negrito, etc.

Exemplos:

• Se valor > 50, pintar o fundo de Dourado.
• Se meta_atingida == true, mostrar ícone de Check.

Vínculos de Estilo Direto

Vincule propriedades CSS diretamente a variáveis de dados. Útil quando a cor vem do banco de dados.

• Onde: Aba “Condicional” -> Seção “Vínculos de Estilo”.
• Exemplo: Cor do Fundo -> \{\{cor_time\}\}