时间戳

首页 > 解决方案 > 根据屏幕分辨率更改 Material Design 响应式按钮的内容

html - 根据屏幕分辨率更改 Material Design 响应式按钮的内容

问题描述

我将 Angular8.x与 Material Design 组件（用于 Angular）和@angular/flex-layout@8.0.0-beta.26.

我正在尝试做出响应，并且在根据屏幕尺寸更改mat-toolbar组件的内容时遇到了一个小问题（我敢打赌这对于有经验的人来说是微不足道的）。mat-button

这是我的第一种方法：

<button [matMenuTriggerFor]="profileMenu" fxShow mat-button>
  <!-- Show this set when fxShow.gt-sm -->
  <mat-icon class="nav-link-icon" fxHide fxShow.gt-sm>person</mat-icon>
  <span fxHide fxShow.gt-sm>{{ profile }}</span>
  <mat-icon fxHide fxShow.gt-sm>arrow_drop_down</mat-icon>

  <!-- ...alternatively, show this set when fxShow.lt-md -->
  <mat-icon fxHide fxShow.lt-md>menu</mat-icon>
</button>

我以为我可以将这些元素包装在 a<div>或其他东西中，但是定位变得很糟糕，我必须考虑那些微小的对齐。<button>此外，还有一些警告表明，按照这种方法，某些元素是不允许在内部使用的。

我可以将两个<button>元素Flex应用到它们一次，但我不确定这种方法。

最后，我试图通过使用来完成这项工作ng-template（我想这是最好的选择，在我看来；我正在关注这个例子），但我找不到办法做到这一点：

<button [matMenuTriggerFor]="profileMenu" mat-button>
  <ng-template fxHide fxShow.gt-sm matMenuContent>
    <mat-icon class="nav-link-icon">person</mat-icon>
    <span>{{ profile }}</span>
    <mat-icon>arrow_drop_down</mat-icon>
  </ng-template>
  <ng-template fxHide fxShow.lt-md matMenuContent>
    <mat-icon>menu</mat-icon>
  </ng-template>
</button>

是否可以ng-template用于这种情况。如果是这样，任何提示？

标签： htmlcssangularflexboxangular-flex-layout

解决方案

由于您使用的是 Angular，我的建议是制作 2 个按钮并使用 *ngif 根据屏幕大小触发每个按钮。

因此，在您的 .ts 文件中，将屏幕尺寸加载到变量“screenSize”中。

还有一个使用 *ngif 的按钮示例：

<button *ngIf="screenSize <= 1000" [matMenuTriggerFor]="profileMenu" fxShow mat-button>
  <!-- Show this set when fxShow.gt-sm -->
  <mat-icon class="nav-link-icon" fxHide fxShow.gt-sm>person</mat-icon>
  <span fxHide fxShow.gt-sm>{{ profile }}</span>
  <mat-icon fxHide fxShow.gt-sm>arrow_drop_down</mat-icon>

  <!-- ...alternatively, show this set when fxShow.lt-md -->
  <mat-icon fxHide fxShow.lt-md>menu</mat-icon>
</button>

<button *ngIf="screenSize > 1000" [matMenuTriggerFor]="profileMenu" fxShow mat-button>
  <!-- Show this set when fxShow.gt-sm -->
  <mat-icon class="nav-link-icon" fxHide fxShow.gt-sm>person</mat-icon>
  <span fxHide fxShow.gt-sm>{{ profile }}</span>
  <mat-icon fxHide fxShow.gt-sm>arrow_drop_down</mat-icon>

  <!-- ...alternatively, show this set when fxShow.lt-md -->
  <mat-icon fxHide fxShow.lt-md>menu</mat-icon>
</button>

所以第一个按钮只有在屏幕尺寸为 1000 或以下时才会出现。内容不同的第二个按钮只有在超过 1000 个时才会出现。

希望这可以帮助！

推荐阅读