如何在App布局中应用迷你变体抽屉与AngularDart中的角度组件

时间：2017-10-29 08:01:07

标签： dart angular-dart dart-html dart-webui

我想在我的项目中使用Angular Dart在角度组件的app布局中应用迷你变体永久抽屉。我试过但没有成功，我怎么能这样做？

应用css会得到以下结果，如何更改抽屉尺寸。

material-drawer {
        max-width: 56px;
    }

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="home"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="send"></material-icon>
            </material-list-item>
            <material-list-item>
                <material-icon icon="drafts"></material-icon>
            </material-list-item>
        </div>
        <div group>
            <div label>Tags</div>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </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">Tushar Rai</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="app-layout">
        <p>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.
        </p>
        <p>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.
        </p>
        <p>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.
        </p>
        <p>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.
        </p>
    </div>

    <div class="controls">
        <h3>Options</h3>
        <material-toggle [(checked)]="end" label="end">
        </material-toggle>
    </div>
</material-content>

app_component.scss 

@import 'package:angular_components/css/material/material';

:host {
  border: 1px solid;
  display: block;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 800px;
}

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

a:link, a:visited, a:active, a:hover {
  color: $mat-white;
  text-decoration: none;
}

app_component.dart 

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.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';
import 'package:tr_app/src/firebase_service.dart';

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

2 个答案:

答案 0 :(得分：1)

你非常接近我建议做两件事： a）翻转app_component.scss和layout.scss.css的顺序。这允许覆盖具有相同的特异性并仍然适用。 b）抽屉打开的距离由内容的边距宽度处理。所以你的CSS应该是这样的：

material-drawer[persistent] + material-content {
  margin-left: 56px;
}

material-drawer {
  max-width: 56px;
}

答案 1 :(得分：1)

enter image description here app_component.html 

<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">Tushar Rai</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation" id="twitter">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/twitter-white.png">
                </a>
            </nav>
            <nav class="material-navigation" id="google-plus">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/google-plus-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="facebook">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/facebook-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="pinterest">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/pinterest-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="instagram">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/instagram-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="youtube">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/youtube-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="quora">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/quora-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="linkedin">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/linkedin-white.png"/>
                </a>
            </nav>
            <nav class="material-navigation" id="github">
                <a href="" target="_blank">
                    <img class="social-icon-image" src="images/github-white.png"/>
                </a>
            </nav>
        </div>
    </header>

    <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="home"></material-icon>Home
                </material-list-item>
                <material-list-item>
                    <material-icon icon="work"></material-icon>Work
                </material-list-item>
                <material-list-item>
                    <material-icon icon="account_circle"></material-icon>About
                </material-list-item>
                <material-list-item>
                    <material-icon icon="contact_mail"></material-icon>Contact
                </material-list-item>
            </div>

            <div group class="navigation-resize">
                <material-button icon>
                    <material-icon icon="arrow_right"></material-icon>
                </material-button>
            </div>
        </material-list>


    </material-drawer>

    <div class="app-layout">
        <p>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.
        </p>
    </div>
    <footer-layout></footer-layout>[![enter image description here][1]][1]
</material-content>

app_component.css 

material-content material-drawer {
    position: fixed;
}

material-content header {
    position: fixed;
}

material-drawer {
    max-width: 56px;
}

.social-icon-image {
    width: 16px;
    height: 16px;
}

.material-navigation:hover {
    width: 24px;
    height: 24px;
    padding: 8px;
    text-align: center;
    border-radius: 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
}

#twitter:hover {background-color: #00aced;}
#facebook:hover {background-color: #3b5998;}
#google-plus:hover {background-color: #dd4b39;}
#pinterest:hover {background-color: #cb2027;}
#instagram:hover {background-color: #bc2a8d;}
#linkedin:hover {background-color: #007bb6;}
#youtube:hover {background-color: #bb0000;}
#quora:hover {background-color: #a82400;}
#tumblr:hover {background-color: #32506d;}
#flickr:hover {background-color: #ff0084;}
#dribbble:hover {background-color: #ea4c89;}
#foursquare:hover  {background-color: #0072b1;}
#medium:hover {background-color: #00ab6c;}
#github:hover {background-color:#767676;}

.app-layout {
    padding-top: 72px;
    padding-left: 72px;
    padding-bottom: 16px;

}

.navigation-resize {
    width: 56px;
    position: absolute;
    bottom: 0;
    margin-bottom: 8px;
}

.navigation-resize material-button {
    float: right;
}
相关问题
最新问题