如何在 AngularDart 中使用 Angular 组件在 App 布局中应用迷你变体抽屉

Question

我想在我的项目中使用 Angular Dart 在 Angular 组件的应用布局中应用迷你变体永久抽屉。我尝试了但没有成功，我该怎么做？

应用 css 得到以下结果，如何更改抽屉大小。

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

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);
}

Answer 1

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

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

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

Answer 2

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;
}