我的页面应在桌面上有3列,在移动设备上应分组为3个选项卡。 我能够做到这一点,但必须复制组件,并根据可用宽度而脱颖而出。这会导致额外的维护和可能的问题,例如更新桌面实例并忘记为手机做同样的事情。

问题描述 投票:0回答:1

将布局关注分为自己的组成部分:

@if

然后将contement项目

进入布局组件:

import { Component, signal } from '@angular/core'; import { MatTabsModule } from '@angular/material/tabs'; @Component({ selector: 'app-responsive-layout', imports: [MatTabsModule], template: ` @if (isMobile()) { <mat-tab-group> <mat-tab label="Tab 1"> <ng-content select="[data-section-1]"></ng-content> </mat-tab> <mat-tab label="Tab 2"> <ng-content select="[data-section-2]"></ng-content> </mat-tab> <mat-tab label="Tab 3"> <ng-content select="[data-section-3]"></ng-content> </mat-tab> </mat-tab-group> } @else { <div class="columns-collection"> <div class="column"> <ng-content select="[data-section-1]"></ng-content> </div> <div class="column"> <ng-content select="[data-section-2]"></ng-content> </div> <div class="column"> <ng-content select="[data-section-3]"></ng-content> </div> </div> } `, styles: ` .column-collection { display: grid; grid-template-columns: repeat(3, 1fr); } .column { display: flex; flex-direction: column; } `, }) export class ResponsiveLayoutComponent { // TODO: update when on a mobile device protected readonly isMobile = signal(false); }

我使用Image demonstrating the layout<app-responsive-layout> <app-component-1 data-section-1=""></app-component-1> <app-component-2 data-section-2=""></app-component-2> <app-component-3 data-section-3=""></app-component-3> </app-responsive-layout> 属性

选择哪个组件进入哪个列/选项卡,但是您可以使用任何有效的CSS选择器(包括组件的
angular angular-material
1个回答
0
投票
)。

如果您还没有办法来确定您是否在移动设备上,则可以使用

角材料cdk
.

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.