材料角度4的扩展板 [英] Expansion-panel from material angular 4

问题描述

我有一个带有 material 2.0.0-beta.12 的 angular 4.4.4 应用程序，我想使用 Material Design 中的 mat-expansion-panel.

I hava an angular 4.4.4 application with material 2.0.0-beta.12 and I want to use the mat-expansion-panel from material design.

这是我的代码:

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

所以它运行良好，但可以从浏览器中删除 mat-expansion-panel-body 中的边距 margin: 0 24px 16px; ?

So it works well but it possible to remove the margin in the mat-expansion-panel-body which has, from the browser margin: 0 24px 16px; ?

推荐答案

在你的 style.css 或你的组件样式中，你需要添加以下 css:

In your style.css or your components style you need to add the following css:

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

这是由于视图封装.您可以在此处阅读更多相关信息:https://angular.io/guide/component-styles

This is due to view encapsulation. You can read more about this here: https://angular.io/guide/component-styles

更新:

不推荐使用/deep/、::ng-deep修改材质组件的样式.请参阅此链接.

The use of /deep/, ::ng-deep to modify the styles of material components has been deprecated. See this link.

然而，使用 @angular/core ^6.1.0 和 @angular/material ^6.4.6> 我能够更改 Angular Material 的扩展面板的样式，而无需添加任何特定内容.看起来您现在可以简单地更改组件 css 文件中的样式.所以这应该有效:

However, using @angular/core ^6.1.0 and @angular/material ^6.4.6 I was able to change the style of Angular Material's Expansion panel without having to add anything specific. It seems like you can now simply change the style in your components css file. So this should work:

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

您可以在此处阅读有关弃用 /deep/ 的更多信息，::ng-deep 此处.

You can read here for more information about the deprecation of /deep/, ::ng-deep here.

这篇关于材料角度4的扩展板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！