angular material card toolbar

Question

i would like to create a toolbar for angular md-cards.

something similar to this image

<md-card layout="column" >
              <md-toolbar>
                <div class="md-toolbar-tools">
                  <h3>Card Header</h3>
                  <span flex></span>
                  <md-button class="md-icon-button">
                    <md-icon md-font-icon="fa-calendar" class="fa" aria-label="open menu"></md-icon>
                  </md-button>
                  <md-button class="md-icon-button">
                    <md-icon md-font-icon="fa-user" class="fa" aria-label="open menu"></md-icon>
                  </md-button>
                </div>
              </md-toolbar>
              </md-card-content>Card Content</md-card-content>
</md-card>

is there any current directives for ngMaterial -angular material- that can be used to get such nice toolbar for cards or do i have to make custom css for it ?

Answer 1

Angular Material toolbar is using your theme primary color as the toolbar's background-color by default.

toolbar-theme.scss implementation: https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss

One way to use the background-colors you like is to override the css with !important

md-toolbar {
    background-color: white !important;
}

Another way is to set your accent color as white, you can follow this on how to configure theme colors in your app: https://material.angularjs.org/0.11.4/Theming/03_configuring_a_theme

Then, you can use md-accent in your toolbar directive, for example:

<md-toolbar class="md-accent">
  <h2>title</h2>
</md-toolbar>

But this method is under the assumption your accent theme color is white. If you are following Google material design, then you should set multiple themes as charlietfl said.

If you want the font, text size, and color like the picture you showed, you can inspect elements on your browser to get the styles it is using and put it to your CSS.