代码之家 › 专栏 › 技术社区 › x80486

根据屏幕分辨率更改材质设计的响应按钮的内容

angular-flex-layout flexbox angular css html

0

x80486 · 技术社区 · 5 年前

我用的是角度 8.x 以及材料设计组件(用于角度)和 @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> 遵循这种方法。

我可以要两个 < 元素与 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>

是否可以使用为了这个案子。如果有,有小费吗?

2 回复 | 直到 5 年前

1

0

AndyOR 5 年前

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

因此,在.ts文件中,将屏幕大小加载到变量“screenSize”中。

<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时才会出现。

希望这有帮助!

2

0

ExceptionLimeCat 5 年前

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>