Angular Material 2 - Disable Ripple?

问题

I'm currently working with md-tab-group (just updated to latest version yesterday)...

Does anyone know

if it is possible to disable/configure Ripple on existing components (md-tab-group in this case)? Latest version causes my tab headers to jump because ripple is calculating large values, solution is to add a small value for md-ripple-max-radius for md-tab-label directly in the template of MdTabGroup.
if there are plans to remove min-width for md-tab-labels? I'm working with a quite small tab group (only 300px width), therefore 160px min-width is not usable.

Thank you!

回答1:

Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material.

Just simply do something like this:

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

Also if you are using the latest Angular Material, it's a little bit different like this below:

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

回答2:

I came up with two ways to override md styles based on another post. I had the exact same problem for tabs being too wide in a small tab group. It is still very experimental and might need further explanations but it has worked for me.

First solution using Sass styling

You can use /deep/ before the class you are trying to override

/* 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's 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>

Second solution with pure css
- Create an overrides.css file that you link in your main index.html and then override the material classes here

/* overrides.css */
.md-tab-label ,.md-tab-label-active {
  min-width: 0; /* same comments as the first solution */
}

<!-- index.html -->
<link rel="stylesheet" content="text/css" href="overrides.css">

Both are kinda dirty, but the first one provides me a good solution to override a md component's style, keeping the alterations inside the concerned components (consider wrapping those components for local changes only).

来源：https://stackoverflow.com/questions/41162195/angular-material-2-disable-ripple

标签

angular-material2