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

Question

我正在使用 Angular 8.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>

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

我可以有两个 <button>带有 Flex 的元素设置应用于它们一次，但我不确定这种方法。

最后，我试图通过使用 ng-template 来完成这项工作(我想这是最好的选择，在我看来；我正在关注 this example )，但我找不到办法做到这一点:

<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对于这种情况。如果是这样，有什么建议吗？

Answer 1

由于您使用的是 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时才会出现。

希望这对您有所帮助!