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

Question

我正在使用 Angular 8.x 以及 Material 设计组件（针对 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

您似乎需要将响应式类应用于按钮元素本身。看看这个 stackblitz example.

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

Answer 2

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

希望对您有所帮助！

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

Change content for Material Design's responsive button based on screen's resolution

html

css

angular

flexbox

angular-flex-layout