移动端的离子底部标签和桌面端的侧边菜单

Posted 2023-03-22

【中文标题】移动端的离子底部标签和桌面端的侧边菜单

【英文标题】：Ionic bottom tabs on mobile and side menu on desktop

【发布时间】：2020-02-29 14:49:25

【问题描述】：

您好，我正在用 ionic 4 和 angular 构建一个应用程序，我有一个左侧菜单，但我想要完成的是，当我在移动设备上时，该菜单位于底部选项卡上，当我m 在较大的屏幕上，菜单移动到左侧。我一直无法做到这一点，谁能指出我正确的方向？

【问题讨论】：

您找到解决方案了吗？我想用 Ionic 5 实现相同的功能。

【参考方案1】：

自己管理响应式断点的一种方法是隐藏在 Material CDK 中的一个功能，称为布局：

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

我过去曾使用它向ngx-datatable 添加响应式布局。

Alligator.io 有一个good introduction to this subject。

使用它的一种方法是设置一些断点，以及一个存储当前断点的变量：

  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: $minWidthpx) and (max-width: $maxWidth - 1px)`])
        .subscribe((state: BreakpointState) => 
          if (!state.matches)  return; 
          this.layout = maxWidth;
          console.log('Layout', this.layout);
        );
    );

至于您正在寻找的实际功能，这只是设置两个 UI，然后使用ngIf 使用 CDK 信息显示或隐藏它们的情况：

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