web-dev-qa-db-fra.com

Panneau de dilatation en matériau angulaire 4

Je possède une application 4.4.4 angulaire avec material 2.0.0-beta.12 et je souhaite utiliser le mat-expansion-panel de la conception des matériaux.

Ceci est mon code:

           <mat-expansion-panel class="parametersPanel">
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            PARAMETERS
                        </mat-panel-title>
                    </mat-expansion-panel-header>
                    <table style="width:100%">
                        <tbody>
                            <tr class="parameterListItem">
                                <td class="icon"><img src="assets/images/alert.png"></td>
                                <td class="parameterName">Parameter 1</td>
                                <td class="parameterValue">Value</td>
                                <td class="unit">unit</td>
                            </tr>                        
                        </tbody>
                    </table>
            </mat-expansion-panel>

Donc ça marche bien mais il est possible de supprimer la marge dans le mat-expansion-panel-body qui a, depuis le navigateur margin: 0 24px 16px;?

angularmaterial-designangular-material
8
Adrien

Dans votre style style.css ou vos composants, vous devez ajouter le css suivant:

/deep/ .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}

Ceci est dû à la visualisation de l'encapsulation. Vous pouvez en savoir plus à ce sujet ici: https://angular.io/guide/component-styles

Mettre à jour:

L'utilisation de /deep/, ::ng-deep pour modifier les styles de composants de matériau est obsolète. Voir ce link .

Cependant, en utilisant @angular/core^6.1.0 et @angular/material^6.4.6, j'ai été en mesure de modifier le style du panneau d’extension d’Angular Material sans rien ajouter de spécifique. Il semble que vous puissiez maintenant simplement changer le style dans votre fichier CSS de composants. Donc, cela devrait fonctionner:

.mat-expansion-panel-body {
    padding: 0;
}

Vous pouvez lire ici pour plus d'informations sur la désapprobation de /deep/, ::ng-deepici .

10
nicholaschris

Au lieu de /deep/, vous devriez utiliser ::ng-deep, qui est un alias fourni par angular. La prise en charge de /deep/ etc. est déjà supprimée du navigateur Chrome. Donc, dans votre exemple, ce serait:

::ng-deep .parametersPanel .mat-expansion-panel-body {
    padding: 0;
}
9
user8836607

Cela fonctionne à 100%.

Ajoutez ceci dans votre style.css:

.mat-expansion-panel-content > .mat-expansion-panel-body {
  padding: 0 !important;
}
3
George C.

celui-ci a fonctionné pour moi

::ng-deep .mat-expansion-panel-body {
 padding: 0px 0px 0px 0px;

}

J'espère que ça marchera pour toi 

2
kawthar