8.5.0.0


O MAINFORM está dentro de um uniScrollBox( sboxGridBlock ).


Nota 1:

Na construção dos seus formulários, você deve inserir um uniScrollBox para receber seus blocos responsivos.

Apesar de uniContainerPanel( com autoscroll = true ) também funcionar, já foi observado que em algumas circunstânias ele não entrega os melhores resultados corretamente.


Nota 2:

Por padrão, o RadCORE vai "bloquear" o scroll horizontal de todos os "TUniScrollBox" mantendo apenas o scroll vertical.

Caso você deseje exibir a barra de scroll horizontal, basta usar o atributo:

[[scrollbar:show-h]] como é demonstrado no "frmDEMO_PANELS"


Nota 3:

Por padrão, o RadCORE vai remover o "alClient" de todos os "TUniScrollBox" aplicar uma ancoragem para evitar algumas anomalias na renderização.

Caso você deseje manter o "alClient" basta usar o atributo:

[[scrollbox:reset-off]] 




Os blocos são responsáveis por aplicar "responsividade" em nossas telas.


Eu tentei usar uma sintaxe parecida com a do BootStrap, vamos entender:


Como explicado no tópico anterior, o RadCORE cria um GRID de 12 COLUNAS e cada coluna com 20px de espaço entre os blocos( offset ou Guter ).


O Guter/offset sempre será único( no controle de temas vc pode aumentar ou dimunuir o valor padrão ).


Uma linha de blocos deve ser formada somando suas colunas até um total de 12( mais adiante você verá que esse valor pode ser customizado ).



Vejamos a seguinte configuração:


[[cols:xs-12 sm-12 md-6 lg-3 xl-3 4k-3 8k-3]]


          // default values

          XS         Extra small: Telas muito pequenas

          SM         Small: Telas pequenas

          MD         Middle: Telas médias

          LG         Large: Telas grandes

          XL         Extra Large: Telas Extra Grandes

          4K         Telas 4K

          8K         Telas 8K


Em telas pequenas( XS e SM ), eu digo ao RadCORE que esse bloco ocupará 12 colunas, ou seja, ficará apenas 1 bloco por linha.


Em telas médias( MD ), eu digo ao RadCORE que esse bloco ocupará 6 colunas.


Em telas grandes( LG, XL, 4k e 8k ), eu digo ao RadCORE que esse bloco ocupará 3 colunas.


IMPORTANTE: Sempre inicie os atributos de um bloco com o "cols:"


Dica:

A partir de "md-", o RadCORE assume a mesma configuração para os ítens posteriores:


[[cols:xs-12 sm-12 md-3]]


Ou seja, lg- xl- 4k e 8k receberão 3 colunas também.



Informando apenas o número de colunas, o valor é aplicado em todas as variações:


[[cols:12]]



SAIBA MAIS:

Como pode observar, os blocos responsivos tem seu próprio sistema de organização, mesmo que vc os deixe desorganizados na tela, ou seja, você não precisa se preocupar com o padrão VCL ( WYSIWYG ).







Por padrão, os blocos responsivos quando se reagrupam , fazem isso com uma animação de movimento suave e um "fade".


Além de desligar isso globalmente no controle de temas, você poderá fazer em blocos específicos, basta utilizar os atributos:


- animate:off

- fade:off



Para um melhor entendimento, faça testes e experimente alterar os valores.





Created with the Personal Edition of HelpNDoc: Easily create CHM Help documents