Блог

Я хотел бы использовать mat-tab-group в мобильном приложении. Проблема в том, что ширина по умолчанию больше, чем в моем приложении Windows. я хотел бы знать, как я могу уменьшить ширину mat-tab-group по умолчанию.

Есть несколько способов уменьшить ширину mat-tab-group.

1) Предоставьте пользовательский класс для вашей директивы. На вашем component.html мы добавили .custom-tab-group класс в директиву mat tab.

 <mat-tab-group class="custom-tab-group">
    .
    .
    .
</mat-tab-group>
  

И в вашем css определите класс со следующими свойствами

 .custom-tab-group {
  width:200px
}
  

Ознакомьтесь с рабочей демонстрацией здесь.

2) Перезапишите .mat-tab-group класс в вашем основном файле style.css. Это тот, который находится на том же уровне каталога, что и ваш index.html, main.ts, package.json и т.д. Возможно, вам потребуется добавить объявление !important. Вот демонстрационная версия.

 .mat-tab-group {
  width: 200px!important;
}
  

3) В компоненте, использующем mat-tab, вам нужно будет использовать /deep/ теневой пирсинг для принудительного изменения стиля. Однако я бы не рекомендовал этот метод, поскольку он скоро будет устаревшим. Если вы хотите использовать его, вам нужно будет добавить следующие свойства css в свой файл component.css,

 /deep/.mat-tab-group {
 width: 200px!important; /* you might or might not need to use the !important declaration */
}
  

Я добавил рабочую демонстрацию сюда.