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

В настоящее время я работаю с md-tab-group (недавно обновленная до последней версии)...

Кто-нибудь знает

если можно отключить/настроить Ripple на существующих компонентах (в этом случае md-tab-group)? Последняя версия заставляет мои заголовки табуляции прыгать, потому что пульсация вычисляет большие значения, решение заключается в том, чтобы добавить небольшое значение для md-ripple-max-radius для md-tab-label непосредственно в шаблоне MdTabGroup.
если есть планы удалить min-width для md-tab-labels? Я работаю с довольно маленькой вкладкой (только шириной 300 пикселей), поэтому ширина 160px min не может использоваться.

Спасибо!

Ответ 1

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

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

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

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

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

Ответ 2

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

Первое решение с использованием стиля 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>