Кнопка Angular Material 2 теряет пульсацию, если для TabGroup установлено свойство [backgroundColor] - PullRequest
Новая
       10

Кнопка Angular Material 2 теряет пульсацию, если для TabGroup установлено свойство [backgroundColor]

0 голосов
/ 14 января 2019

У меня есть простая кнопка внутри вкладки, если установлено свойство [backgroundColor] группы вкладок, кнопка теряет свой волновой эффект.

Проверьте это Stackblitz для live-демо 

<mat-tab-group [color]="primary" [backgroundColor]="'primary'">

  <!-- Try Removing the [backgroundColor] property in the above line
  and click the button to see the ripple effect-->

  <mat-tab label="First">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Third">
    <button mat-raised-button>Button Looses Ripple</button>
  </mat-tab>

</mat-tab-group>

Однако, если я удалю свойство [backgroundColor] , кнопка восстанавливает свой волновой эффект.! 

<mat-tab-group [color]="primary">

  <mat-tab label="First">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

  <mat-tab label="Third">
    <button mat-raised-button>Button has Ripple</button>
  </mat-tab>

</mat-tab-group>

Я что-то не так делаю ?? Если нет, то помогите мне решить эту проблему Проблема ...

UPDATE :! Установка цвета для кнопки делает свое дело .. но что если я хочу достичь, как показано ниже 

<mat-tab-group [color]="primary" [backgroundColor]="'primary'">
  <!-- TAB -->
  <mat-tab label="Third">
    <!-- RIPPLE NOT_WORKING -->
    <div class="div-style mat-elevation-z4" matRipple> Not Working </div>
  </mat-tab>
</mat-tab-group>

<!-- RIPPLE_WORKING -->
<div class="div-style mat-elevation-z4" matRipple> Woring </div>

Пример StackBlitz

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Ответ на этот вопрос причина такого поведения и решение этой проблемы.!

StackOverflow-ответ

Эффект ряби работает, но мы не можем увидеть его как рябь цвет белый. Он принимает белый цвет, потому что вы установили backgroundColor для основного и ваш основной цвет синий, который имеет передний план белый. Волна автоматически выходит на передний план цвет.

Вы можете решить это двумя способами

Предоставляя цвет атрибуту matRippleColor, если ваш backgroundColor установите на темный цвет, в вашем случае его основной и предупредите. 

<div class="div-style mat-elevation-z4" matRipple matRippleColor="rgba(0,0,0,.1)>Ripple</div>
0 голосов
/ 14 января 2019

Если вы установите accent, то цветная рябь будет работать нормально, или вы установили цвет темы на кнопки, эффект ряби будет снова отображаться с основной темой. 

  <mat-tab-group [color]="primary" [backgroundColor]="'primary'">

  <!-- Try Removing the [backgroundColor] property in the above line
   and click the button to see the ripple effect-->

  <mat-tab label="First">
  <button mat-raised-button color="primary">Button Looses Ripple</button>
  </mat-tab>

  <mat-tab label="Second">
  <button mat-raised-button color="accent">Button Looses Ripple</button>
 </mat-tab>

 <mat-tab label="Third">
 <button mat-raised-button color="primary">Button Looses Ripple</button>
 </mat-tab>

 </mat-tab-group>
...