Ioni c нижние вкладки на мобильном и боковое меню на рабочем столе

Question

Привет, я создаю приложение в ioni c 4 и angular, у меня есть левое боковое меню, но я хочу сделать, чтобы sh это когда я на мобильном телефоне, чтобы это было меню на нижних вкладках и когда я на большом экране, это меню перемещается в левую сторону. Я не смог этого сделать, кто-нибудь может указать мне правильное направление?

Answer 1

Один из подходов к самостоятельному управлению отзывчивыми контрольными точками - это функция, спрятанная в CDK материалов под названием Layout:

• https://material.angular.io/cdk/layout/overview

I В прошлом мы использовали это для добавления адаптивных макетов к ngx-datatable.

Alligator.io имеет хорошее введение в эту тему .

Один из способов его использования это установить несколько точек останова и переменную для хранения текущей:

  public readonly LAYOUT = {
    XS: 768,
    SM: 992,
    MD: 1200,
    LG: 1600,
    XL: 1920,
    XXL: 2560,
  };
  public layout: number = this.LAYOUT.MD;

Затем в ngOnInit установите его так, чтобы это автоматически управлялось:

    // Setting up breakpoint mechanism
    const breakpoints = Object.keys(this.LAYOUT).map(k => this.LAYOUT[k]);
    breakpoints.forEach((maxWidth, index) => {
      const minWidth = (index > 0) ? breakpoints[index - 1] : 0;
      this.breakpointObserver
        .observe([`(min-width: ${minWidth}px) and (max-width: ${maxWidth - 1}px)`])
        .subscribe((state: BreakpointState) => {
          if (!state.matches) { return; }
          this.layout = maxWidth;
          console.log('Layout', this.layout);
        });
    });

Как к фактической функции, которую вы ищете, это просто случай настройки обоих пользовательских интерфейсов, а затем использование ngIf для отображения или скрытия их с информацией CDK:

<app-some-component *ngIf="layout > LAYOUT.XS"></app-some-component>