Angular 7 адаптивный макет с использованием Material Grid - PullRequest
Новая
       28

Angular 7 адаптивный макет с использованием Material Grid

0 голосов
/ 16 января 2019

Я настраиваю веб-приложение и хочу внедрить мобильную версию с быстротой реагирования.

Я использую Angular 7, а угловой материал 7.2. 

<mat-grid-list cols="12">
  <mat-grid-tile  [colspan]="6">

    <h1 class="title">Title</h1>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h2 class="date">Date</h2>

  </mat-grid-tile>
  <mat-grid-tile [colspan]="3">

    <h1 class="price">price€</h1>

  </mat-grid-tile>
</mat-grid-list>

У меня есть один список с 12 столбиками, который содержит 3 плитки:

A- 6 (6/12)

B- 3 (3/12)

С-3 (3/12)

WEB

<-------- 12 -------->

AAAAAA BBB CCC

Когда я получу размер телефона, я хочу иметь: один сеточный список с 12 столбиками, который содержит 3 плитки:

A- 12 (12/12)

B- 6 (6/12)

C- 6 (6/12)

MOBILE

<-------- 12 -------->

AAAAAAAAAAAA

BBBBBB-CCCCCC

Извините за мой английский;) Спасибо

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Чтобы настроить точку останова: 

breakpointObserver.observe(['(min-width: 500px)'])
0 голосов
/ 16 января 2019

В макетах сетки действительно имеют значение только соотношения (а не фактическое количество столбцов). В вашем случае соотношение между размерами плиток не меняется - первая плитка всегда в два раза шире, чем вторая и третья. Таким образом, вы можете математически уменьшить ваш мобильный макет до: 

A- 6 (6/6)
B- 3 (3/6)
C- 3 (3/6)

Теперь значения плитки colspan одинаковы для обоих макетов, единственное отличие - количество столбцов. Это упрощает реализацию адаптивного дизайна, поскольку вам нужно всего лишь изменить значение cols между 12 и 6.

Привязать введенное значение cols к выражению: 

<mat-grid-list [cols]="isMobile ? 6 : 12">...

Используйте Модуль макета CDK для обнаружения изменений устройства: 

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
...
class MyComponent {

  public isMobile: boolean = false;

  constructor(breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.Handset
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }

  ...
}

Вы также можете настроить точку останова в зависимости от размера экрана: 

breakpointObserver.observe([
  '(max-width: 599px)'
]).subscribe(result => {
  this.isMobile = result.matches;
});
...