[英]Expansion-panel from material angular 4
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.我有一个 Angular 4.4.4 应用程序, material 2.0.0-beta.12
,我想使用材料设计中的mat-expansion-panel
。
This is my 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>
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;
所以它工作得很好,但可以从浏览器边距中删除mat-expansion-panel-body
中的margin: 0 24px 16px;
? ?
In your style.css
or your components style you need to add the following css:在您的style.css
或您的组件样式中,您需要添加以下 css:
/deep/ .parametersPanel .mat-expansion-panel-body {
padding: 0;
}
This is due to view encapsulation.这是由于视图封装。 You can read more about this here: https://angular.io/guide/component-styles您可以在此处阅读有关此内容的更多信息: https ://angular.io/guide/component-styles
Update:更新:
The use of /deep/
, ::ng-deep
to modify the styles of material components has been deprecated.使用/deep/
, ::ng-deep
来修改材质组件的样式已被弃用。 See this link .请参阅此链接。
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.但是,使用@angular/core
^6.1.0
和@angular/material
^6.4.6
我能够更改 Angular Material 扩展面板的样式,而无需添加任何特定内容。 It seems like you can now simply change the style in your components css file.看来您现在可以简单地更改组件 css 文件中的样式。 So this should work:所以这应该工作:
.mat-expansion-panel-body {
padding: 0;
}
You can read here for more information about the deprecation of /deep/
, ::ng-deep
here .您可以在此处阅读有关弃用/deep/
和::ng-deep
的更多信息。
This works 100%.这 100% 有效。
Add this inside your style.css:在你的 style.css 中添加这个:
.mat-expansion-panel-content > .mat-expansion-panel-body {
padding: 0 !important;
}
Instead of /deep/
you should use ::ng-deep
, which is an alias provided by angular.你应该使用::ng-deep
而不是/deep/
,它是 angular 提供的别名。 Support for /deep/
etc. is already removed from chrome browser.已经从 chrome 浏览器中删除了对/deep/
等的支持。 So in your example that would be:所以在你的例子中,这将是:
::ng-deep .parametersPanel .mat-expansion-panel-body {
padding: 0;
}
this one worked for me这个对我有用
::ng-deep .mat-expansion-panel-body {
padding: 0px 0px 0px 0px;
}
I hope that will work for you我希望这对你有用
::ng-deep .mat-expansion-panel-body {
padding: 0 !important;
}
if you add it to the main styles.scss it works (not at the component style level)如果您将它添加到主要的 styles.scss 它可以工作(不是在组件样式级别)
.mat-expansion-panel-body {
padding: 0;
}
This code below will work when added to your components css file下面的代码将在添加到您的组件 css 文件时起作用
:host {
::ng-deep {
.mat-expansion-panel-spacing {
margin: 0px 0 !important;
}
}
}
The easiest and safest way to do it is to include this in your project global style.scss最简单和最安全的方法是将其包含在您的项目全局 style.scss
app-instruction mat-expansion-panel.trigger-panel {
.mat-expansion-panel-body {
padding:0;
}
} }
This code helped me.这段代码帮助了我。
.mat-expansion-panel-header {
padding: 0px 16px;
}
You need to add encapsulation: ViewEncapsulation.None
property into your @Component decorator您需要将encapsulation: ViewEncapsulation.None
属性添加到您的 @Component 装饰器中
@Component({
selector: '...',
...
encapsulation: ViewEncapsulation.None
})
export class myApp{}
Then this will work然后这将工作
.mat-expansion-panel-body {
padding: 0 !important;
}
Note that ::ng-deep and /deep/ will not work on the new version of angular/material as @nicholaschris says请注意, ::ng-deep 和 /deep/ 不会像 @nicholaschris 所说的那样在新版本的 angular/material 上工作
You can easily remove parent padding.您可以轻松删除父填充。
<div class="removePadding">
<mat-list-item *ngFor="let item of item.children" class="testingSmall">
<h3 matLine>{{item.label}}</h3>
</mat-list-item>
</div>
.removePadding{
margin: 0 -24px -16px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.