-1

I wanna implement the button based tabs using angular-material. I tried applying the class and other stuff. But, it was not working and couldn't find a way.

I am following angular-material guide:https://material.angular.io/components/tabs/examples

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Is there a way to place the normal button for First, Second and third tabs? I wanna implement something like this: https://i.stack.imgur.com/hcQvb.jpg I am scratching my head for more than three hours. Thanks!

aadhira
  • 321
  • 1
  • 3
  • 16
  • Describe more specific what is not working. Do you have error messages? Share them. Have you solved the dependencies? Show us your components code. – nologin Mar 22 '19 at 10:54
  • I tried applying different styles by placing classes. It went vain. I couldn't really find the way of placing the button over the tab wherein I need to retain the functionality of mat-tabs over here. Is there way to accomplish this? – aadhira Mar 22 '19 at 10:58

1 Answers1

2

You can change the mat-tab-label style..

in style.css add (NOT IN CSS COMPONENT):

.mat-tab-label
{
//personal css style
}

(EXAMPLE)

.mat-tab-label{
 background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

}

https://material.angular.io/guide/customizing-component-styles

Guiditox
  • 657
  • 4
  • 10
  • Thanks. It worked. I was writing my style inside the component's css file and so, it was not working! – aadhira Mar 22 '19 at 11:29
  • 1
    no problem :), if you want to change the style material components, you need to add or change this in style.css, before angular material theme up. – Guiditox Mar 22 '19 at 11:34