CODEWITHSUNDEEP
angular-material2
Cleudi
Cleudi

Reputation: 451

Angular Material 2 - Disable Ripple?

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

Does anyone know

  1. 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.
  2. 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!

Upvotes: 45

Views: 77607

Answers (5)

Galavec
Galavec

Reputation: 21

Revisando en modo "Desarrollador" desde el navegador Edge, encontré que puedes quitarle ese efecto mediante CSS o SASS utilizando las propiedades que se usan para "ripple":

 .mat-mdc-icon-button
    border-radius: 0px
    --mat-icon-button-state-layer-color: transparent
    --mat-icon-button-ripple-color: transparent

// Para el cursor:
.mdc-icon-button
    cursor: default

Puedes ponerle "transparent" o "none".

Por favor califica esta respuesta si te sirvió.

Upvotes: 2

moaaz alomary
moaaz alomary

Reputation: 39

The current version of Angular I'm now working on is 15.2.6. This is the only way it worked for me when using components like MatStepper:

  1. In app.module.ts 
    import {MatRippleModule, MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';**
  2. In the decorator of @NgModule, you should provide this in the providers[] array: 
    providers: [{provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true}}]

Upvotes: 3

mscmnc
mscmnc

Reputation: 431

If you want to remove ripple and click effect in Angular v15 with Angular material v15 you can do it with the "disableRipple" property and some stylings.

<mat-checkbox
   formControlName="yes"
   disableRipple
   >Yes
</mat-checkbox>

Add styling rule to the styles.scss or styles.css:

   .mdc-checkbox__ripple { 
     display: none;
   }

Upvotes: 1

Alireza
Alireza

Reputation: 104690

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>

Upvotes: 93

Evan G
Evan G

Reputation: 35

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.

  1. 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>

  1. 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).

Upvotes: 0

Related Questions