Seguindo nossa pequena aplicação feita anteriormente, vamos selecionar cada "par" de componentes: Um Label e um "Edit".


Abra o menu de contexto clicando com o botão direito sobre um dos componentes selecionados



Então o RC ELEMENTs será exibido:



Agora você deve clicar na "Action" Blockfy, como apontado acima e será exibido o quadro de propriedades do Blockfy:



O Blockfy vai criar um "bloco responsivo" e transportar os componentes selecionados para dentro dele e aplicar nossa primeira configuração de responsividade.



Repita essa mesma operação com os outros 2 conjuntos de componentes e então seu formulário deverá ficar assim:



Cada bloco responsivo nada mais é que um UniContainerPanel, nativo do UNIGUI, mas, com uma configuração que será interpretada pelo RadCORE durante a execução.


Clique com o botão direito do mouse apenas no componente "rcBlock10" e acione o RC ELEMENTs.



Como vimos uma breve intrrodução no tópico: "Responsividade: O Básico", veja que o BLOCKFY inseriu uma instrução "cols:" a cada um dos nossos blocos responsivos.


Lembrando do padrão de 12 colunas virtuais temos então:


Cada bloco ocupará 12 colunas em telas pequenos( xs-12 e sm-12 ) e em telas médias em diante, ocupará 3 colunas ( md-3.... ).


Execute a aplicação e veja o resultado:



Observe que mesmo com os componentes fora de alinhamento, todos ficam perfeitamente alinhados e ocupando um mesmo "pedaço" da tela.

Cada um ocupa 3 colunas virtuais totalizando 9 colunas e ficando 3 colunas restantes pra completar uma linha.


Você pode ajustar a dimensão da janela do browser e observar o que ocorre.


Agora acione o simulador MOBILE do browser( no EDGE é F12 ).



E então cada bloco ocupa agora 12 colunas e cada um "cai" abaixo do outro.


O QUE VEM AGORA


Agora é o momento de estudar e se aprofundar.



Created with the Personal Edition of HelpNDoc: Easily create Qt Help files