Как закрыть ящик для материала при изменении размера экрана носителя? - PullRequest
Новая
       75

Как закрыть ящик для материала при изменении размера экрана носителя?

0 голосов
/ 17 сентября 2018

Как изменить вид ящика с постоянного ящика на временный ящик при смене экрана мультимедиа. Я хочу реализовать ответ ящика как постоянный @media screen and (min-width: 701px) и временный @media screen and (max-width: 700px). С app_layout angular_components в проекте Angular Dart.

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 Ответ

0 голосов
/ 19 сентября 2018

Короткий ответ: вы не можете работать только с CSS, поскольку они являются отдельными компонентами, а не только CSS-элементами.

Может быть возможно иметь два выдвижных ящика, если это зависит от размера экрана, но это не шаблон, который мы поддерживаем или планируем поддерживать. К сожалению

...