javascript - Proper way of reducing width of Angular Material's Tab labels? - Stack Overflow

admin管理员组

文章数量:1405737

The problem

Since /deep/, >>>, and ::ng-deep are deprecated, what could be the correct way of reducing the width of mat-tab-label which has a min width of 160px on desktop ?

• Without overriding it in the main styles.css
• I still want this custom styling of Material Tabs to be scoped to the parent ponent.

Material spec statement

Fixed tabs display all tabs on one screen, with each tab at a fixed width.
The width of each tab is determined by dividing the number of tabs by the screen width.
They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

However that's not entirely true, in my case, the max-width of my parent ponent is set to 320px which roughly allow 106px for each mat-tab-label.

Edit 1

The Angular Material doc advocate to Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to. which is precisely what I wan to avoid because of separation of concerns

The problem

Since /deep/, >>>, and ::ng-deep are deprecated, what could be the correct way of reducing the width of mat-tab-label which has a min width of 160px on desktop ?

• Without overriding it in the main styles.css
• I still want this custom styling of Material Tabs to be scoped to the parent ponent.

Material spec statement

Fixed tabs display all tabs on one screen, with each tab at a fixed width.
The width of each tab is determined by dividing the number of tabs by the screen width.
They don’t scroll to reveal more tabs; the visible tab set represents the only tabs available.

However that's not entirely true, in my case, the max-width of my parent ponent is set to 320px which roughly allow 106px for each mat-tab-label.

Edit 1

The Angular Material doc advocate to Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to. which is precisely what I wan to avoid because of separation of concerns

• javascript
• angular
• typescript
• angular-material

Share Follow edited Sep 10, 2020 at 7:54 Thomas asked Sep 10, 2020 at 7:11 ThomasThomas 15011 silver badge1111 bronze badges 1

• The idea of Material is creating an uniform UI, that will look / feel same across multiple instances. So, if you need to have a shorter labels in, say, your "notification-ponent" don't create a class for .notification-tab but for .low-width-tab or something similar. The odds are that if you need it in one place, you will need it later on. And that makes putting it in global .scss (personally I usually create file per ponent and then import it to styles.scss) logical - as long as you move from "styling a ponent" to "styling a feature". – TotallyNewb Commented Sep 10, 2020 at 8:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I ended up defining a custom styling of MatTab in the global styles.css :

your-ponent-selector {
  .mat-tab-label {
    min-width: 25px !important; // In addition to mat-strech-tabs allowing tabs to fill remaining space in parent container
    padding: 5px;
  }
}

• your-ponent-selector will do the scoping, custom styling won't bleed in other ponents MatTab instances.
• Don't forget to use mat-stretch-tabs on <mat-tab-group> in order to stretch Angular Material tabs to fit the parent width.

This one worked for me to reduce the tabs' size to fit the screen in Material 18.

::ng-deep .mat-mdc-tab.mdc-tab {
    min-width: auto; //or whatever size
}

Don't forget these inputs in your mat-tab-group

<mat-tab-group mat-stretch-tabs="true" disablePagination="true">

本文标签： javascriptProper way of reducing width of Angular Material39s Tab labelsStack Overflow