Componentes
Botões
Uso:
Os botões devem ser utilizados quando se quer comunicar ações como por exemplo, criar, salvar, exportar, excluir, etc. Os resultados dessas ações quase sempre serão mostrados na mesma página. Algumas situações comuns em que você pode utilizar botões:
- Para enviar um formulário.
- Para iniciar uma nova tarefa.
- Para navegar entre passos de um formulário.
- Para editar, excluir ou visualizar um item.
Tipos de Botões:
Cada tipo de botão está associado a um propósito e a um nível de ênfase.
Botões Primários:
O botão primário deve ser utilizado para a ação principal da página. Ele terá o nível mais alto de ênfase, ficando visualmente destacado para o usuário. Recomendamos utilizar apenas um botão primário por página.
Botões Secundários ou Default:
O botão secundário, deve ser utilizado quando a ação for menos importante que a principal. É comum seu uso em situações em que é oferecida uma opção alternativa à principal e para a qual se quer dar menos ênfase. Eles também podem ser usados para iniciar funções nos sistemas e recursos.
Botões de Atenção:
Este tipo de botão deve ser utilizado quando a ação for crítica, como botões que desativam dados.
Botões de Sucesso:
Deve ser utilizado para salvar ou finalizar ações das funções do sistema.
Botões com Ícones:
Os botões com ícones podem ser utilizados quando se deseja reforçar visualmente a ação. Devem ser aplicados preferencialmente em botões primários e posicionados à esquerda do label. Utilize o ícone à direita quando a ação estiver relacionada a progresso, como por exemplo, avançar e próximo. Para os botões default os icones podem ser coloridos (no caso do illi), já para os botões primários e de atenção as cores dos ícones devem ser as mesmas das fontes, normalmente de cor branca.
Títulos dos Botões
Os títulos dos botões devem indicar suas ações ou funções que ele irá iniciar.
Links: Acesse documentação Sencha / Acessar documentação Ionic / Acessar documentação Quasar
Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.
Barras
As barras são componentes utilizados para agrupar outros componentes como botões, menus e checkboxes. Elas são componentes nativos do framework Sencha JS.
Uso:
- TBar = top bar fica no topo das janelas
- BBar = bottom bar fica na parte inferior das janelas
Top Bars:
Devem ser utilizadas para agrupar funções que vão incluir ou alterar dados nas informações do módulo como incluir, cancelar, importar, exportar etc.
Bottom Bars:
Devem ser utilizadas para agrupar funções de conclusão, navegação, atualização ou desistêntcia do corpo da tela ou janela, como por exemplo, salvar um formulário ou navegar pelas tabs de um cadastro ou filtro.
Ações de conclusão (salvar, concluir, finalizar) preferencialmente ficam posicionadas à direita e as demais ficam à esquerda.
Quantidade de Funções por Barra:
Em alguns cenários a quantidade de funções por tela é alta ou o título das funções é muito extenso, caso isso aconteça é recomendável que se agrupe as funções da página em um menu button. Por padrão, telas com mais de 2 funções já devem ser agrupadas.
Recomendável
Não Recomendável
Links: Acesse a documentação Sencha Js
Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.
Tabs
Tabs são componentes que têm o intuito de exibir mais informação, usando menos tela.
Uso:
As tabs são usadas para acessar módulos abertos do sistema, dividir formulários muito extensos e separar parâmetros de filtros. É uma forma de exibir mais informação, usando menos tela.
Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.