Question

如何在更改媒体屏幕时将抽屉的可见性从固定抽屉更改为临时抽屉。我想将抽屉的响应实现为持久@media screen and (min-width: 701px)和临时@media screen and (max-width: 700px)。在Angular Dart项目中使用angular_components的app_layout。

app_component.html

<material-drawer persistent #drawer="drawer"
    [class.custom-width]="customWidth"
    [attr.end]="end ? '' : null">
  <material-list *deferredContent>
    <div group class="mat-drawer-spacer"></div>
    <div group>
      <material-list-item>
        <material-icon icon="inbox"></material-icon>Inbox
      </material-list-item>
      <material-list-item>
        <material-icon icon="star"></material-icon>Star
      </material-list-item>
      <material-list-item>
        <material-icon icon="send"></material-icon>Sent Mail
      </material-list-item>
      <material-list-item>
        <material-icon icon="drafts"></material-icon>Drafts
      </material-list-item>
    </div>
    <div group>
      <div label>Tags</div>
      <material-list-item>
        <material-icon icon="star"></material-icon>Favorites
      </material-list-item>
    </div>
  </material-list>
</material-drawer>
<div class="material-content">
  <header class="material-header shadow">
    <div class="material-header-row">
      <material-button icon
          class="material-drawer-button" (trigger)="drawer.toggle()">
        <material-icon icon="menu"></material-icon>
      </material-button>
      <span class="material-header-title">Simple Layout</span>
      <div class="material-spacer"></div>
      <nav class="material-navigation">
        <a>Link 1</a>
      </nav>
      <nav class="material-navigation">
        <a>Link 2</a>
      </nav>
      <nav class="material-navigation">
        <a>Link 3</a>
      </nav>
    </div>
  </header>
  <div>
    Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
    et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
    veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
    legere iriure blandit. Veri iisque accusamus an pri.
  </div>
  <div class="controls">
    <h3>Options</h3>
    <material-toggle [(checked)]="end" label="end">
    </material-toggle>
    <material-toggle [(checked)]="customWidth" label="custom width">
    </material-toggle>
  </div>
</div>

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';

@Component(
  selector: 'mat-drawer-demo',
  directives: [
    DeferredContentDirective,
    MaterialButtonComponent,
    MaterialIconComponent,
    MaterialPersistentDrawerDirective,
    MaterialToggleComponent,
    MaterialListComponent,
    MaterialListItemComponent,
  ],
  templateUrl: 'app_component.html',
  styleUrls: [
    'app_component.css',
    'package:angular_components/app_layout/layout.scss.css',
  ],
)
class AppComponent {
  bool customWidth = false;
  bool end = false;
}

app_component.scss

@import 'package:angular_components/app_layout/mixins';

:host {

}

.controls {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.custom-width {
  @include mat-drawer-width(50%);
  @include mat-temporary-drawer-width(50%);
}

@media screen and (min-width: 701px) {

}

@media screen and (max-width: 700px) {

}

Answer 1

简单的答案是，您不能只使用CSS，因为它们是单独的组件，而不仅仅是CSS组件。

根据屏幕尺寸的不同，可能有两个抽屉，但是这不是我们支持或计划支持的模式。抱歉

如何随着媒体屏幕尺寸的变化来关闭进纸器？

1 个答案: