Tabelas
As tabelas/tables no Acronos Design System são componentes essenciais para exibir e organizar dados estruturados. Elas utilizam átomos e moléculas para criar interfaces flexíveis e consistentes.
HEADER Tabela [Atom]
Componente utilizado como cabeçalho das tabelas, organizando os títulos das colunas.
Plataformas disponíveis
Desktop
Estados disponíveis
Default: Exibição padrão com títulos visíveis.
Exemplo de uso
Os títulos de colunas são usados para categorizar informações, como:
Coluna 1, Coluna 2, Coluna 3, Coluna 4.
Linha Tabela [Atom]
Elemento básico para compor linhas dentro de uma tabela.
Plataformas disponíveis
Desktop
Estados disponíveis
Default: Exibe conteúdo das células de forma alinhada.
Exemplo de uso
Dados estruturados, como:
Cell, Cell, Cell, Cell.
Tabela [Molecule]
Componente completo que combina o cabeçalho e as linhas para exibir dados estruturados de forma clara e funcional.
Plataformas disponíveis
Desktop
Estados disponíveis
Default: Apresenta o header e as linhas de dados de forma completa.
Tamanhos suportados
As tabelas são flexíveis e podem ser adaptadas para incluir:
Um número variável de colunas e linhas.
Exemplo de uso
Estruturas organizadas para dados como:
Informações financeiras, listas de produtos, tabelas de preços, etc.
Estilos e Espaçamentos
Tipografia
Os títulos seguem a fonte padrão definida no design system para garantir legibilidade.
Cores
Header: Fundo claro com texto escuro para maior contraste.
Linhas: Fundo alternado ou uniforme para facilitar a leitura visual.
Espaçamento
As células possuem paddings internos uniformes, garantindo conforto visual e separação clara entre os dados.
Interatividade e Acessibilidade
Teclado
Linhas e células devem ser navegáveis utilizando o teclado, assegurando acessibilidade para todos os usuários.
Leitores de Tela
Cada célula deve conter rótulos descritivos para melhorar a experiência de quem utiliza tecnologias assistivas.
Responsividade
As tabelas são otimizadas para diferentes tamanhos de tela e podem ser ajustadas para visualizações responsivas.
Notas Técnicas
Utilize os átomos do design system para construir tabelas customizadas de acordo com as necessidades específicas do projeto.
Garanta que o design mantenha consistência com os padrões definidos no Acronos.