Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Os componentes visuais do Cronapp (exemplo: Botões, Caixa de texto, Tabela, Grades etc) são estruturas funcionais de interação entre o usuário e o sistema. Criados em HTML, CSS e JavaScript, são utilizados no designer de páginas web ou telas de aplicações mobile e caracterizam-se por serem altamente customizáveis em modo low-code.
O Cronapp oferece dezenas de componentes na funcionalidade Editor de Views, mas permite que você crie seus próprios componentes visuais, exportando-os para serem utilizados em outros projetos.
Figura 1.1 - Tela de login (mobile) que utiliza três componentes visuais: Imagem, Caixa de texto e Botão
A maioria dos componentes possuem alguma diferença visual e de configuração dependendo depender da plataforma (web ou mobile) e outros , um mesmo componente pode possuir alguma diferença visual ou de configuração e alguns são exclusivos, isso se deve por conta de essas diferenças ocorrem devido as características próprias dessas plataformas, como a usabilidade.
Figura 1.2 - Exemplo de componentes visuais para projetos web (esquerda) e mobile (direita)
Arrastando componente visual
Para inserir um componente, basta arrastá-lo arrastar até à área do formulário e soltá-losoltar. Ao arrastar o mouse com um componente seguro sobre outro componente na tela, este ficará azulado e uma seta indicará se o onde componente solto será inserido, por exemplo, antes ou depois do componente na tela. (Animação 1.3)
Image Removed
Animação 1.3 - Arrastando um botão para uma view de um projeto webAnimação 1.3 - Arrastando um botão para uma view de um projeto web
Propriedades do Componente Visual
Podemos alterar diversas características dos nossos componentes visuais, como por exemplo o rótulo ou ícone do botão, para isso, siga os passos abaixo:
Image Modified
Figura 2.1 - Modificando propriedades do componente visualImage Removed
Figura 2.1 - Modificando propriedades do componente visual
- Selecione o componente visual que você deseja editar, nesse caso o botão;
- Clique na propriedade a ser alterada, nesse exemplo usamos o ícone;
- Escolha o novo ícone.
Acesso aos subcomponentes
Alguns componentes são formados por outros componentes, por exemplo o botão, que possui uma <div>
externamente e possui internamente as tags os elementos <i>
para o ícone e o <span>
para o seu rótulo (Figura 2.4). Ao selecionar o componente, as propriedades de todos os subcomponentes são exibidas na subaba Propriedades. Na Ao selecionar o botão na figura 3.1, ao selecionar o botão, tanto a propriedade Ícone (, referente ao subcomponente ícone) , quanto a propriedade Conteúdo (, referente ao subcompoente subcomponente label) , são exibidas.
Figura 3.1 - Ao selecionar um componentescomponente, as propriedades de seus subcomponentes são exibidas no menu lateral
Ao clicar no botão bolha Cadeado (item 1 da figura 3.1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Na figura 3.2, após desbloquear o componente botão foi possível selecionar o label (tag elemento <span>
) e exibir somente as propriedades do deste subcomponente no menu lateral.
Figura 3.2 - Ao desbloquear um componente é possível selecionar seus subcomponentes
No rodapé da janela é exibido o elemento da árvore DOM selecionado. Na figura 3.1, onde o componente botão está selecionado, é exibido o elemento mais externo do botão a tag "<div>
" e o identificador do componente, já . Já na figura 3.2 o rodapé exibe todo o caminho, do elemento mais externo do componente até o elemento do subcomponente selecionado.
Propriedades do subcomponente
Como informado anteriormente, é possível alterar a propriedade de um subcomponente, no exemplo abaixo estamos alterando a cor de fundo do rótulo do botãoAo clicarmos no símbolo do cadeado (Desagrupar/Agrupar Componente), podemos destrinchar as características do nosso componente acessando suas subcamadas, podendo assim, como por exemplo n742pxa Figura 2.3, alterar a cor do texto, botão, ícone e dentre outras propriedades do seu elemento.
Image Modified
Figura 2. 3.1 - Modificando o estilo da subcamada 4 - Acesso ao menu de estilo de um elemento
Image Removed
Nessa página
Índice |
---|
subcomponente
- Desbloqueie o botão bolha cadeado e selecione o subcomponente, neste caso o rótulo;
- selecione a subaba Estilo e clique no botão "..." para alterar a aba lateral para o modo estilização.
Image Added
Figura 3.5 - Modificação da cor de fundo do subcomponente rótulo
- Altere a cor inserindo um valor de cor hexadecimal ou clicando sobre a cor para exibir uma palheta de seleção de cores;
- Salve as alterações.
Código fonte do componente
Figura 2.3.2 - Modificando o estilo da subcamada de um elemento
É possível também modificarmos as características dos nossos componentes visuais através de do modo high code, editando os trechos HTML e CSS. Com um clique duplo sobre um componente é possível visualizar o código HTML referente ao componente selecionado.
Image Modified
Figura 24.4 1 - Janela de com o código HTML fonte do componente visual criadoselecionado
Nessa página
Índice |
---|