代码之家 › 专栏 › 技术社区 › Mateusz Gebroski

角度材质FlexLayout fxHide不隐藏

angular-flex-layout angular-material responsive-design

0

Mateusz Gebroski · 技术社区 · 6 年前

我正在使用flex布局开发mat stepper。每个步骤都包含和图标以及一个段落,以使其更具责任感和可读性。我想在较小的屏幕上隐藏段落,只留下图标。根据我的理解,如果分辨率低于small,fxHide.lt-sm应该隐藏元素,但不幸的是,没有发生任何事情,它看起来是这样的: Image of stepper (Galaxy S5 size)

<mat-horizontal-stepper>
  <mat-step>
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>format_list_numbered</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Grades</p>
        </li>
      </ul>
    </ng-template>
    <app-grades></app-grades>
  </mat-step>
  <mat-step label="Student">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>account_circle</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Student</p>
        </li>
      </ul>
    </ng-template>
    <app-user></app-user>
  </mat-step>
  <mat-step label="Teachers">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>people</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Teachers</p>
        </li>
      </ul>
    </ng-template>
    <app-teachers></app-teachers>
  </mat-step>
  <mat-step label="Messages">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>message</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Messages</p>
        </li>
      </ul>
    </ng-template>
    <app-messages></app-messages>
  </mat-step>
</mat-horizontal-stepper>

FxLayoutModule包含在app.module.ts的导入中

0 回复 | 直到 6 年前

1

3

Fletch 5 年前

FlexLayoutModule必须导入到所有希望使用它的模块中

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule,
  ]
})
export class MyModule { }