4.9 - Aba Appearance: ícone, paleta e cor
Aba Appearance — ícone, paleta e cor
A aba Appearance (Aparência) controla como o card é renderizado: ícone, cores, fundo, formato de número e unidade. É o que transforma dados em comunicação visual. Veja nos prints abaixo.
Visão geral dos campos
A aba tem 8 campos divididos em 2 grupos:
Visual
icon— classe Font Awesome (sótile)color_palette— qual paleta aplicarpalette_id— paleta custom (se escolhida)background_style—paletteoumanualbackground_color— cor de fundo (só manual)font_color— cor do texto (só manual)
Número
number_style—compactouexactunit_type—none,monetaryoucustomunit_symbol— texto custom (ex.:%,h)
Print 1 — aba Aparência de um tile (Companies) com configuração padrão:
Repare que o preview à direita espelha exatamente o que vai aparecer no dashboard — cor de fundo, ícone, número.
icon — o ícone do card
Só aparece para item_type=tile. Recebe uma classe Font Awesome 4 (sem o prefixo fa-). O boardkit usa a versão 4 — então sempre procure por ícones lá.
Onde achar os ícones?
Catálogo oficial
A fonte definitiva — busca, filtro por categoria, visualização.
fontawesome.com/v4/iconsGaleria por categoria
Os ícones mais usados em dashboards reais, organizados pelo que representam. Cada categoria mostra 4 ícones com explicação do uso típico.
Pessoas & Contatos
Para tiles que mostram indivíduos, leads, usuários do sistema, clientes PF.
fa-user— pessoa individual (1 lead, 1 usuário)fa-users— grupo (todos os contatos)fa-user-plus— novos no período (criados hoje/semana)fa-user-times— perdidos ou inativos
Empresas & Lugares
Para clientes PJ, localizações geográficas, operações físicas.
fa-building— empresas / clientes PJ (res.partner is_company=True)fa-map-marker— geolocalização (latitude/longitude preenchidos)fa-globe— por país / internacionalfa-truck— logística / entregas / transferências
Vendas & Receita
Para KPIs financeiros, pedidos, faturamento, ticket médio.
fa-usd— receita em dólar / KPIs financeirosfa-shopping-cart— pedidos (sale.order)fa-credit-card— pagamentos / invoicesfa-line-chart— KPIs de tendência (receita mensal)
Atividades & Projetos
Para CRM, tarefas, agenda, projetos, prazos.
fa-tasks— atividades / tarefas (mail.activity)fa-calendar— eventos / prazos (calendar.event)fa-clock-o— tempo / atrasos (date_deadline)fa-briefcase— projetos (project.project)
Alertas & Status
Para tiles que precisam de atenção imediata (overdue, errors, success).
fa-warning— alerta genérico (count > 0)fa-exclamation-triangle— atenção / cuidadofa-times-circle— erro / falha / canceladofa-check-circle— sucesso / aprovado / concluído
Dashboards & Métricas
Para tiles que refletem o tipo de visualização ou modelo técnico.
fa-bar-chart— tile com gráfico de barras por baixofa-database— total de registros / volumefa-cogs— processamentos / automaçõesfa-envelope— mensagens / email (mail.message)
Dica: consistência visual
Mantenha o mesmo estilo dentro de um dashboard. Se você usa fa-user em um tile, use fa-users (não fa-group) nos relacionados. Pequenos detalhes como esses fazem o dashboard parecer profissional.
Como o boardkit usa o ícone
O boardkit simplesmente adiciona fa + nome no HTML:
<i class="fa fa-building fa-2x"></i>
O fa-2x dobra o tamanho automaticamente — o boardkit já aplica isso internamente, então você só informa o nome (ex.: building).
background_style — palette ou manual
Controla como o fundo é escolhido:
palette (padrão)
O boardkit usa a cor mais escura da paleta configurada no dashboard, e escolhe uma cor de texto com contraste automático.
Quando usar: 90% dos casos. Visual coerente com o restante do dashboard.
manual
Você define background_color e font_color diretamente (color picker).
Quando usar: destaque especial (ex.: "Alerta" em vermelho) ou identidade de marca.
color_palette — qual paleta usar
| Valor | O que faz |
|---|---|
| dashboard | Padrão. Segue a paleta configurada no dashboard — todos os cards mudam juntos quando você troca. |
| Preset | Paleta fixa (azul, verde, vermelho, etc.). Útil quando você quer destaque em um card específico. |
| custom | Paleta definida em Settings do boardkit. Permite cores fora dos presets. |
number_style — compact ou exact
compact (padrão)
Números grandes são abreviados: 1.2K, 3.4M, 1.5Bi. Mais legível em dashboards.
Exemplo: 1245000 → 1,2M
exact
Número completo, sem abreviação. Útil para valores monetários onde cada centavo importa.
Exemplo: 1245000 → 1.245.000,00
unit_type — moeda, símbolo ou nada
Adiciona um sufixo ao número. Só visível para tile e kpi.
| Valor | O que faz | Exemplo |
|---|---|---|
| none | Sem unidade — só o número. | 1.245 |
| monetary | Formata como moeda da empresa (R$, $, €...). Recomendado para KPIs financeiros. | R$ 1.245,00 |
| custom | Você digita o símbolo (ex.: %, h, kg). Aparece unit_symbol. |
87%, 42h |
Print 2 — tile Open Opportunities (crm.lead) com paleta aplicada:
Mesmo modelo (Contato) e configuração similar — o boardkit cicla pelas cores da paleta para dar variedade visual.
Print 3 — KPI Overdue Rate com unidade custom:
KPIs têm o mesmo formulário, mas o preview mostra o número em destaque com o título e o valor secundário.
Restrições por tipo de item
A aba muda dependendo do item_type:
tile
Todos os campos. É onde a aba brilha — ícone, fundo, número, unidade.
kpi
Mesmo formulário, sem icon. Suporta unidade (moeda/custom).
list
Quase vazio — só number_style. Sem paleta, sem ícone (a tabela é a "aparência").
Dicas práticas
3 regras de ouro
- Use
paletteem 90% dos casos — o boardkit cuida do contraste. - Reserve
manualpara alertas (vermelho) ou destaques especiais (verde). - Combine
monetary+compactpara KPIs financeiros em dashboards grandes.
Atenção ao trocar a paleta do dashboard
Se você usa color_palette=dashboard, todos os tiles mudam juntos. Se trocou para um preset específico, o tile não acompanha a mudança.
Próxima lição: Interação
Com a aba Appearance pronta, vamos para a aba Interaction — onde você decide o que acontece quando o usuário clica no card.
Agora que você domina a aba Appearance, vamos para a aba Interaction — onde o clique no card vira uma ação concreta.
Detalhe da aba Appearance: 8 campos visuais, icon Font Awesome, color_palette (dashboard/preset/custom), background_style (palette/manual), number_style (compact/exact), unit_type (none/monetary/custom) e restrições por item_type.
Por enquanto não há comentários.