Tema
Catálogo de widgets
Os widgets dividem-se em cinco famílias. Esta página serve para escolher; a referência completa, com propriedades e eventos de cada um, está em Catálogo de widgets (referência).
Mostrar dados
| Widget | Para que serve |
|---|---|
| KPI | Um ou mais números em destaque, com rótulo, ícone e cor |
| Gráfico | Catorze tipos, de barras a Sankey |
| Tabela | Linhas e colunas, com formatação por coluna e paginação |
| Lista | Registos um por linha, com os campos escolhidos |
| Cartões | Registos em grelha, com imagem opcional |
| Progresso vs limite | Um valor comparado com um limite, com limiares de cor |
Ver Indicadores (KPI), Gráficos, Tabelas e Listas e cartões.
Apresentar
| Widget | Para que serve |
|---|---|
| Texto | Uma linha de texto, fixa ou ligada a um campo |
| Markdown | Texto formatado: títulos, listas, tabelas, ligações |
| Imagem | De um endereço, de um anexo ou de um campo dos dados |
| Linha | Um separador horizontal ou vertical |
Ver Texto e apresentação.
Agrupar
| Widget | Para que serve |
|---|---|
| Painel | Caixa com título; os widgets lá dentro passam a ser seus filhos |
| Abas | Vários blocos no mesmo espaço, um de cada vez |
| Barra fixa | Faixa presa ao topo ou ao fundo, que não acompanha o scroll |
Receber valores
| Widget | Para que serve |
|---|---|
| Caixa de texto | Texto de uma linha |
| Texto longo | Texto de várias linhas |
| Número | Valor numérico |
| Sim/Não | Caixa de verificação |
| Lista pendente | Escolha de uma lista, com pesquisa e selecção múltipla |
| Data | Seletor de data |
Ver Campos de entrada.
Navegar
| Widget | Para que serve |
|---|---|
| Botão | Executa o que estiver no evento onClick |
| Link | Vai para outro ecrã do dashboard ou para um endereço externo |
| Breadcrumb | Trilho de navegação entre ecrãs |
Ver Botões e navegação.
Como escolher
Um número que interessa → KPI. Não um gráfico de uma barra só.
Comparar categorias → Barras. Horizontais se os nomes forem compridos.
Evolução no tempo → Linhas ou área.
Partes de um todo → Circular, com poucas fatias. Com mais de seis, barras lêem-se melhor.
Detalhe linha a linha → Tabela.
Registos com fotografia ou com poucos campos → Cartões ou lista.
Explicar o que se está a ver → Markdown. Um dashboard com uma linha de contexto vale por dois sem ela.
O que todos os widgets têm
Independentemente do tipo:
- Layout — coluna e largura em colunas da grelha, Y e altura em píxeis, com posições próprias por dispositivo;
- Aspecto — título, descrição, cores, borda, alinhamento, tipografia;
- Visível e Activo — estado inicial, alterável por código;
- Papéis — quem vê o widget, se for restringido.
Ver Estilos e tema e Layout e grelha.