如何随着媒体屏幕尺寸的变化关闭材料抽屉？

Posted 2023-03-13

【中文标题】如何随着媒体屏幕尺寸的变化关闭材料抽屉？

【英文标题】：How to close the material drawer with the change in the media screen size?

【发布时间】：2019-02-21 18:25:27

【问题描述】：

如何在媒体屏幕更改时将抽屉的可见性从持久抽屉更改为临时抽屉。我想将抽屉的响应实现为持久@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) 

【参考方案1】：

简短的回答是你不能只使用 CSS，因为它们是独立的组件，而不仅仅是 CSS 的东西。

可能有两个抽屉可供您使用，具体取决于屏幕尺寸，但这不是我们支持或计划支持的模式。对不起