根据屏幕分辨率更改 Material Design 响应式按钮的内容
Change content for Material Design's responsive button based on screen's resolution
我正在使用 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
。如果是这样,有什么建议吗?
您似乎需要将响应式 类 应用于按钮元素本身。看看这个 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>
由于您使用的是 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才会出现
希望对您有所帮助!
我正在使用 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
。如果是这样,有什么建议吗?
您似乎需要将响应式 类 应用于按钮元素本身。看看这个 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>
由于您使用的是 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才会出现
希望对您有所帮助!