5

Na documentação do Angular Material Design possui um componente chamado Grid List, que, imagino eu, seja a parte de estruturação do layout, porém ele só tem dois exemplo muito simples e não consegui entender seu uso, então...

  1. Estou certo, o Grid List é isso mesmo?
  2. Se não qual seria o componente pra isso ou devo fazer na mão?
  3. Como usar?
  4. No Material Design Lite costumava usar as classes, por exemplo, mdl-cell--10-col mdl-cell--1-offset em um container para que os elementos não fiquem grudados na borda, como fazer o mesmo no angular?

2 Respostas 2

5

Você pode usar o Material Grid List, para fazer um layout de colunas de forma responsiva em conjunto com o Angular Flex Layout, mas você vai precisar de um pouco de código.

TL;DR; Va para o link de referência, em inglês, mais detalhado que o exemplo abaixo.

O Angular Flex Layout utiliza breakpoints para detectar o tamanho da tela:

  • xs - max-width: 599px;
  • gt-xs - min-width: 600px;
  • sm - min-width: 600px; max-width: 959px;
  • gt-sm - min-width: 960px;
  • md - min-width: 960px; max-width: 1279px;
  • gt-md - min-width: 1280;
  • lg - min-width: 1280px; max-width: 1919px;
  • gt-lg - min-width: 1920px;
  • xl - min-width: 1920px; max-width: 5000px;

Você pode usa-los para definir um layout, fxLayout, em linhas(row) ou colunas(column), ou mesmo visibilidade de objetos com fxShow e fxHide, como abaixo:

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="center stretch" class="row-example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div fxShow="true" fxHide.xs="true"></div>
</div>

No codigo angular de seu componente, para detectar os breakpoints, você precisa de um serviço chamado ObservableMedia, que é instalado com o pacote Angular Flex Layout, abaixo os passos seguido de um exemplo:

$ npm install @angular/flex-layout --save

Você precisa importar o modulo no seu app.module:

...
import { FlexLayoutModule } from "@angular/flex-layout";

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})

Então nos componentes que desejar utilizar o layout responsivo, você precisa injetar o serviço ObservableMedia. No exemplo abaixo, usando o mat-grid-list, podemos usar o ObservableMedia para definir quantas colunas são exibidas por linha:

HTML

<mat-grid-list [cols]="cols | async" gutterSize="16px">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>5</mat-grid-tile>
</mat-grid-list>

TS

public cols: Observable<number>;

  constructor(private observableMedia: ObservableMedia) {}

  ngOnInit() {
    const grid = new Map([
      ["xs", 1],
      ["sm", 2],
      ["md", 2],
      ["lg", 3],
      ["xl", 3]
    ]);
    let start: number;
    grid.forEach((cols, mqAlias) => {
      if (this.observableMedia.isActive(mqAlias)) {
        start = cols;
      }
    });
    this.cols = this.observableMedia.asObservable()
      .map(change => grid.get(change.mqAlias))
      .startWith(start);
  }

No código acima no map grid, são definidos os Media Query Alias, maAlias, que mapeiam os breakpoints dos tamanhos de tela, e associa os mesmos ao numero de colunas desejados.

Em ngOnInit, inicialização do componente, detectamos qual breakpoint está ativo para definir o numero de colunas inicial.

Por fim, inicializamos um Observable para monitorar mudanças de tamanho de tela ativados pelo serviço ObservableMedia, a cadas alteração, ajustamos o tamanho das colunas.

Fonte: https://brianflove.com/2017/05/03/responsive-angular/

1

A lista de recursos do Projeto Material Angular não possui nenhum Sistema de Grid, seja ele por colunas, flexbox ou algum outro método. Este component Grid List nada mais é que um recurso para facilitar a implementação de um mosaico de imagens por exemplo, mas não serve como estrutura de grids para um layout em sí.

Como solução, recomendo que instale em seu projeto o Angular Flex Box que fornece uma API de Layout Grids sofisticada utilizando o Flexbox CSS e MediaQuerys.

1
  • Poderia adicionar exemplos de uso da biblioteca?
    – Costamilam
    Commented 13/07/2018 às 15:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .