Sohan Shirodkar Sohan Shirodkar - 2 months ago 26
AngularJS Question

How to make angular-material tabs transparent?

Angular material allows us to configure themes to give a custom colour to

<md-tabs>
, or for that matter any of it's components.

Is there any way I can make these tabs look transparent so that I can view the background image?

Applying an inline style doesn't help.

Answer

Is this what you mean? CodePen

CSS

#background {
  background-image: url("http://images.photowall.com/products/44352/rural-forest?h=700&q=92");
  height: 100%;
}

.tabsdemoDynamicHeight md-content md-tabs {
  background: transparent;
  border: none;
}

#myTabs md-tabs-wrapper {
  background: transparent;
}

#myTabs md-tab-content {
  background: white
}

Markup

<md-tabs id="myTabs" md-dynamic-height="" md-border-bottom="">