Угловой материал 2 - Отключить пульсацию?

Ответ 1

Используйте disableRipple как атрибут, чтобы отключить рябь для группы md-tab-group как Angular2+ с использованием материала Angular.

Просто сделайте что-нибудь вроде этого:

<md-tab-group disableRipple></md-tab-group>

Также, если вы используете новейший угловой материал, он немного отличается от этого ниже:

<mat-tab-group [disableRipple]="true"></mat-tab-group>

Ответ 2

Я придумал два способа переопределить стили md на основе другого сообщения. У меня была та же самая проблема, что вкладки были слишком широкими в небольшой группе вкладок. Это все еще очень экспериментально и может потребовать дальнейших объяснений, но это сработало для меня.

1. Первое решение с использованием стиля Sass

Вы можете использовать/deep/перед классом, который вы пытаетесь переопределить

/* your-component.component.scss file*/

/deep/ .md-tab-label {
  min-width: 0px; /* Or whatever value you wish */
  /* In some situations !important seems necessary */
}

<!-- your-component.component.html -->
<!-- Template from Angular Material Github Readme.md -->
<md-tab-group>
  <md-tab>
    <template md-tab-label>
      The <em>best</em> pasta
    </template>
    <h1>Best pasta restaurants</h1>
    <p>...</p>
  </md-tab>
  <md-tab>
    <template md-tab-label>
      <md-icon>thumb_down</md-icon> The worst sushi
    </template>
    <h1>Terrible sushi restaurants</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>