Адаптивный дизайн

Angular предоставляет встроенные возможности для реализации адаптивного интерфейса, который корректно отображается на разных устройствах и разрешениях экрана.

Директивы для адаптивного поведения

  1. ngClass и ngStyle Позволяют динамически изменять классы и стили в зависимости от состояния или размера экрана.

    <div [ngClass]="{'mobile-layout': isMobile, 'desktop-layout': !isMobile}">
  Контент
</div>

  2. MediaObserver Сервис из пакета @angular/flex-layout, отслеживающий изменения медиазапросов.

    constructor(private mediaObserver: MediaObserver) {
  this.mediaObserver.asObservable().subscribe((changes: MediaChange[]) => {
    this.isMobile = changes.some(change => change.mqAlias === 'xs');
  });
}

Flex Layout

@angular/flex-layout предоставляет декларативный способ создания гибких сеток, аналогичных CSS Flexbox, с поддержкой адаптивности:

<div fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="start center">
  <div fxFlex="50%" fxFlex.lt-md="100%">Элемент 1</div>
  <div fxFlex="50%" fxFlex.lt-md="100%">Элемент 2</div>
</div>
  • fxLayout.lt-md="column" меняет направление на маленьких экранах.
  • fxFlex.lt-md="100%" растягивает элемент на всю ширину на мобильных устройствах.

Использование Breakpoints

Angular позволяет использовать кастомные медиазапросы для точного управления интерфейсом:

@Component({
  selector: 'app-responsive',
  templateUrl: './responsive.component.html'
})
export class ResponsiveComponent implements OnInit {
  isTablet: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver.observe(['(min-width: 768px) and (max-width: 1024px)']).subscribe(result => {
      this.isTablet = result.matches;
    });
  }
}

Такой подход обеспечивает реакцию компонентов на изменение размеров экрана в реальном времени без перезагрузки страницы.

Адаптивные компоненты Angular Material

Библиотека Angular Material интегрируется с системой адаптивности:

  • mat-sidenav может автоматически скрываться на мобильных устройствах.
  • mat-grid-list поддерживает динамическое изменение количества колонок через cols и медиазапросы.

Совмещение анимаций и адаптивного дизайна

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

Использование Angular предоставляет гибкий, декларативный и структурированный подход к созданию интерактивных и адаптивных веб-приложений, обеспечивая одновременно высокую производительность и эстетичность интерфейса.

Оглавление