如何通过更改介质屏幕尺寸来关闭材料抽屉？

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的东西。

你可能有两个抽屉 - 如果取决于屏幕尺寸，但它不是我们支持或计划支持的模式。抱歉