2017-09-20 77 views
1

带有AngularDart的角度分量的App布局中的抽屉边缘不会被绘制,而scrolling内容在material-content,我该如何解决这个问题? enter image description here带有角度飞镖的角度分量的应用布局中的抽屉边缘

app_component.html

<material-drawer persistent #drawer="drawer" [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> 
<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 href="#AppLayout">Link 1</a> 
     </nav> 
     <nav class="material-navigation"> 
      <a href="#AppLayout">Link 2</a> 
     </nav> 
     <nav class="material-navigation"> 
      <a href="#AppLayout">Link 3</a> 
     </nav> 
    </div> 
</header> 
<div class="content-test"> 
    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. 
    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. 
    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. 
    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.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.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. 
    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.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.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. 
    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. 
    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. 
    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.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. 
    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. 
    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. 
    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. 
    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.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.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. 
    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.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.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. 
    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. 
    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. 
    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.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> 
    </div> 
</material-content> 

app_component.dart来解决这个

import 'package:angular/angular.dart'; 
import 'package:angular_components/angular_components.dart'; 

@Component(
    selector: 'my-app', 
    templateUrl: 'app_component.html', 
    styleUrls: const [ 
    'app_component.css', 
    'package:angular_components/src/components/app_layout/layout.scss.css'], 
    directives: const [ 
     DeferredContentDirective, 
     MaterialButtonComponent, 
     MaterialIconComponent, 
     MaterialPersistentDrawerDirective, 
     MaterialToggleComponent, 
     MaterialListComponent, 
     MaterialListItemComponent, 
    ], 
    providers: const [materialProviders], 
    ) 
class AppComponent { 
    bool end = false; 
} 

回答

0

的一种方式是通过允许主内容滚动独立地像这样:

material-content { 
    max-height: 100%; 
    overflow-y: scroll; 
} 

产生此:

enter image description here