Angulaire Du Matériel 2 - Désactiver Ondulation?

je travaille actuellement avec md-tab-group (dernière mise à jour hier)...

quelqu'un sait -

  1. s'il est possible de désactiver / configurer L'ondulation sur les composants existants (md-tab-groupe dans ce cas)? La dernière version fait sauter les en-têtes de mon onglet parce que ripple calcule de grandes valeurs, la solution est d'ajouter une petite valeur pour md-ondulation-max-radius pour md-tab-étiquette directement dans le modèle de MdTabGroup.
  2. s'il y a des plans pour supprimer le min-width pour le md-tab-étiquettes<!--7? Je travaille avec un tout petit groupe d'onglets (largeur de seulement 300px), donc 160px min-width n'est pas utilisable.

Merci!

15
demandé sur Cleudi 2016-12-15 13:44:55

2 réponses

Utiliser disableRipple comme attribut pour désactiver les ondulations pour le md-tab-group Angular2+ en utilisant le matériau angulaire.

simplement faire quelque chose comme ceci:

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

Aussi, si vous utilisez le derniers matériaux angulaires, c'est un peu différent, comme ci-dessous:

<mat-tab-group [disableRipple]="true"></mat-tab-group>
26
répondu Alireza 2018-03-14 10:15:44

j'ai trouvé deux façons de remplacer les styles md basés sur un autre post. J'ai eu exactement le même problème pour les onglets être trop large dans un petit groupe d'onglets. Il est encore très expérimental et pourrait avoir besoin d'explications supplémentaires, mais il a fonctionné pour moi.

  1. première solution en utilisant Sass style

Vous pouvez utiliser / deep/ avant la classe que vous essayez de outrepasser

/* 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. Deuxième solution avec pur CSS

    • Créer un remplace.css le fichier que vous avez dans votre lien principal index.html puis remplacer le matériel des classes ici

/* 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">

les deux sont un peu sales, mais le premier me fournit une bonne solution pour outrepasser le style d'un composant md, en gardant les modifications à l'intérieur des composants concernés (envisager d'envelopper ces composants pour les changements locaux seulement).

0
répondu Evan G 2016-12-25 21:24:36