javascript - Style Angular Material Nav bar - Stack Overflow

admin管理员组

文章数量:1290266

I have an Angular Material Nav bar in a toolbar as a header. The issue is the underline for the navbar tabs is fixed at the default pink. This is clashing with my page's colour scheme. The relevant code.

<div ng-controller="navCtrl" ng-cloak>
    <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
        <md-toolbar class="md-hue-2">
            <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
                <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item>
                <md-nav-item md-nav-href="#/about" name="about">About</md-nav-item>
            </md-nav-bar>
        </md-toolbar>
    </md-content>
</div>

This is in the config for the app.

$mdThemingProvider.theme('docs-dark', 'default')
        .primaryPalette('grey')
        .warnPalette('red')
        .accentPalette('blue')
        .dark();

Any and all help is wele.

I have an Angular Material Nav bar in a toolbar as a header. The issue is the underline for the navbar tabs is fixed at the default pink. This is clashing with my page's colour scheme. The relevant code.

<div ng-controller="navCtrl" ng-cloak>
    <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
        <md-toolbar class="md-hue-2">
            <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
                <md-nav-item md-nav-href="#/" name="home">Home</md-nav-item>
                <md-nav-item md-nav-href="#/about" name="about">About</md-nav-item>
            </md-nav-bar>
        </md-toolbar>
    </md-content>
</div>

This is in the config for the app.

$mdThemingProvider.theme('docs-dark', 'default')
        .primaryPalette('grey')
        .warnPalette('red')
        .accentPalette('blue')
        .dark();

Any and all help is wele.

• javascript
• html
• angularjs
• angular-material

Share Improve this question Follow asked Jun 18, 2016 at 0:44 manmon42manmon42 31933 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You just need to use md-nav-bar md-nav-ink-bar css property in your css file.

md-nav-bar md-nav-ink-bar {
  background: green;
}

Here is a working example. http://codepen.io/next1/pen/yJaojP

update to latest version angular-material

It was an issue.

本文标签： javascriptStyle Angular Material Nav barStack Overflow