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

您似乎需要将响应式类应用于按钮元素本身。看看这个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响应式按钮的内容

2 个答案: