Componentes

Conceito

Os componentes são os blocos de construção reutilizáveis de nosso Design System. Cada componente atende a uma interação específica ou necessidade de IU e foi criado especificamente para trabalhar em conjunto para criar padrões e experiências de usuário intuitivas.

Botões

Um botão aciona um evento ou ação. Eles permitem que os usuários saibam o que acontecerá a seguir depois de acionar o botão.

Alertas

Alertas são mensagens em destaque exibidas na parte superior da tela.

• Alertas em verde devem ser utilizados para mensagens de sucesso.
• Alertas em vermelho devem ser utilizado para mensagens de erros.
• Alertas em amarelo devem ser utilizados para mensagens de cautela.
• Alertas em verde claro devem ser utilizados para mensagens padrões.

Tags

Uma tag rotula objetos da IU para rápido reconhecimento e navegação.

Chips

Chips são elementos compactos que representam uma entrada, atributo ou ação.

Switches

As opções ativam ou desativam o estado de um único item.

Tabs horizontais

As guias organizam o conteúdo em diferentes telas, conjuntos de dados e outras interações.

Tabs verticais

As guias organizam o conteúdo em diferentes conjuntos de dados.

Paginação

A paginação permite dividir grandes quantidades de conteúdo em pedaços menores em várias páginas.

Radio

Os botões radio permitem que os usuários selecionem uma opção de um conjunto.

Checkbox

Os checkbox permitem que os usuários selecionem mais de uma opção de um conjunto.

Input de texto

Os campos de texto permitem que os usuários insiram texto em uma UI. Eles geralmente aparecem em formulários e caixas de diálogo.

Input de texto sem label

Input de texto sem label deve ser utilizado em casos de cadastros rápidos que não necessitam de um formulário extenso como por exemplo newsletters ou campos com espaço reduzido.

Select

Selecionar permite que os usuários façam uma única seleção ou várias seleções em uma lista de opções.

Select sem label

Input de texto sem label deve ser utilizado em casos de cadastros rápidos que não necessitam de um formulário extenso como por exemplo newsletters ou campos com espaço reduzido.

Campo de busca

É por este campo que o usuário irá adicionar seus principais interesses e desejos ao navegar na plataforma.

Selecionador de datas

Os selecionadores de data permitem que os usuários selecionem um intervalo de datas.

Lista

As listas são índices contínuos e verticais de texto.

Área de texto

Uma área de texto permite que os usuários insiram texto de formato longo que se estende por várias linhas.

Área de texto para formulários

Tellus arcu vehicula amet faucibus ac mus egestas. Lobortis in ultricies in eu aliquet feugiat ullamcorper felis.

Comentários

Espaço de mensagens que registra os últimos comentários, inclui nome, data, hora e foto de perfil da pessoa.

Tabela

As tabelas de dados exibem conjuntos de dados em linhas e colunas.

Cards

Os cards contêm conteúdo e ações sobre um único assunto.

Modal

Um modal exibe o conteúdo que requer interação do usuário, em uma camada acima da página. O modal conta com a versão padrão de 600px de largura e o modelo maior com 952px de largura que pode ser utilizado para conteúdos mais extensos.

Header

O header exibe informações e acesso a telas mais profundas.

Menu

Os menus exibem uma lista de opções para acessar as telas da plataforma.

• Início
• Patrimónios

• Ativos
• Importação de lastros
• Compra de lastros
• Baixa de lastros
• Reprocessamento de lastros
• Renegociação de lastros

• Passivo
• Listagem de séries
• Aprovação de P.U
• Contas a pagar
• Pagamentos diários
• Aprovação de pagamentos

• Sistema
• Participantes
• Configurações

• Início

• Sistema
• Configurações