Grid

A diretiva Grid deve ser usada para criar os grids nas páginas. É possível usar a diretiva em qualquer elemento HTML.

Ativando#

<div uglGrid [grid]="true"></div>

Atributos aceitos na tag#

AtributoInput/OutputTipoObrigatórioValores padrões
uglGrid@Input-Sim-
grid@InputBooleanNãofalse
col@InputNumberNão-
colSm@InputNumberNão-
gap@InputNumberNão-
gapSm@InputNumberNão-
span@InputNumberNão-
spanSm@InputNumberNão-
customCol@InputStringNão-
[uglGrid]

Este é um atributo obrigatório, ele inicializa a diretiva no elemento html.

[grid]

Este atributo pode receber os valores true e false, quando true, indica que o elemento é um elemento de grid, o que quer dizer que é nele que serão atribuido os valores das colunas.

[col] e [colSm]

Estes atributos recebem valores numéricos de 1 à 12, e eles que determina a quantidade de colunas que estarão no grid. As colunas terão sempre o mesmo tamanho.

  • [col] - deve ser usado para desktop
  • [colSm] - deve ser usado para mobile
[gap]

Este atributo adiciona um espaço entre as colunas. Ele aceita qualquer valor numérico e este será convertido para a medida rem. Assim, se for atribuído [gap]="1" será adicionado 1rem na distância entre as colunas.

  • [gap] - deve ser usado para desktop
  • [gapSm] - deve ser usado para mobile
[span]

Este atributo adiciona uma ou mais colunas a direita do elemento que recebe o atributo. Ele aceita um valor numérico e o atributo não deve ser utilizado no elemento grid e sim em um elemento filho.

  • [span] - deve ser usado para desktop
  • [spanSm] - deve ser usado para mobile
[customCol]

Este atributo cria colunas com valor customizado. Ele aceita valores com medidas padrão do CSS (px, rem, %). Para usar, basta passar a largura de cada coluna da seguinte maneira: [customCol]="'50% 25% 25%'", nesse exemplo, serão criados três colunas, sendo a primeira com o tamanho de 50%, o segundo com 25% e o terceiro com 25%. Ainda é possível usar os atributos [gap] e [gapSm].

Exemplo de código#

<div uglGrid [grid]="true" [col]="4" [colSm]="2" [gap]="1" [gapSm]="2">
<div uglGrid [span]="1" [spanSm]="2">Coluna 1</div>
<div>Coluna 2</div>
<div>Coluna 3</div>
</div>

Com colunas customizadas#

<div uglGrid [grid]="true" [customCol]="'50% 25% 25%'">
<div>Coluna 50%</div>
<div>Coluna 25% 1</div>
<div>Coluna 25% 2</div>
</div>

Exibição#

img [grid]="true" [col]="4"

img [grid]="true" [col]="4" [gap]="1"

img [span]="1"