材料角4的膨胀板

发布时间：2020-12-17 08:34:09 所属栏目：安全来源：网络整理

导读：我有一个带有材料2.0.0-beta.12的角度4.4.4应用程序,我想使用材料设计的垫子扩展面板. 这是我的代码： mat-expansion-panel class="parametersPanel" mat-expansion-panel-header mat-panel-title PARAMETERS /mat-panel-title /mat-expansion-panel-header

我有一个带有材料2.0.0-beta.12的角度4.4.4应用程序,我想使用材料设计的垫子扩展面板.

这是我的代码：

<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中的边距,从浏览器边距：0 24px 16px; ？

在style.css或组件样式中,您需要添加以下css：

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

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

更新：

不推荐使用/ deep /,:: ng-deep来修改材质组件的样式.见link.

然而,使用@ angular / core ^ 6.1.0和@ angular / material ^ 6.4.6我能够改变Angular Material的Expansion面板的样式,而无需添加任何特定的东西.您现在可以简单地更改组件css文件中的样式.所以这应该工作：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!