Question

我一直在尝试使用AngularDart来实现材质设计站点，并且已经使用angular_components应用布局设置碰壁了。为了我的一生，我不知道如何更改nav class =“ material-navigation”内容的外观以匹配示例（背景，文本颜色和文本突出显示颜色之类的东西）。当前，文本周围有一个灰色框，而不是与标题颜色匹配。这些属性似乎不是在layout.scss中设置的，所以我很困惑。我对layout.scss文件进行了最小的更改，该文件已在下面发布。对我所缺少的东西有任何见解吗？在此先感谢：）

AngularDart Material Nav

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_button/material_button.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:angular_components/app_layout/material_persistent_drawer.dart';
import 'dart:async';

@Component(
  selector: 'my-app',
  directives: [
    coreDirectives,
    MaterialIconComponent,
    MaterialButtonComponent,
    MaterialToggleComponent,
    MaterialListComponent,
    MaterialListItemComponent,
    MaterialPersistentDrawerDirective],
  templateUrl: 'app_component.html',
  styleUrls: [
    //Holds modifications for angular_components style sheets. Particularly
    //app_layout, which is *not* a component but a weird grouping of components
    //and styles.
    'main.css',
    'app_component.css',
  ],
  providers: [ClassProvider(NomiService)],
)
...

@import 'package:angular_components/app_layout/layout';

.material-header {
  background-color: $mat-vanilla-red-400; //vs. $mat-indigo-500
}

// A row within the header.
.material-header-row {
  /// Class uses for the title inside of a header.
  .material-header-title {
    left: auto; //vs. $mat-grid * 10;
    height: 36px; //$mat-header-height; //vs. $mat-title-font-size
    font-size: 36px;
    //border: 3px solid green; Use to check work!
    //Used to center text!
    margin-left: 37.5%;
    margin-right: 37.5%;
    text-align: center;
    width: 25%;
  }

  .material-navigation{
    border: 3px solid green;
  }

}

<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>
        <img src="favicon.png" width="30">
        <span class="material-header-title">Nomi</span>
        <div class="material-spacer"></div>
        <nav class="material-navigation">
            <a>Test</a>
        </nav>
    </div>
</header>

<material-drawer persistent #drawer="drawer">
    <material-list>
        <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>
    </material-list>
</material-drawer>

带有材质导航的AngularDart应用布局问题

0 个答案: