[英]How to set groups of elements to the left and to the right inside the mat-card-header?
[英]How to align left and right text mat-card-header in angular 4?
我需要在标题标记左侧和右侧的标题中对齐文本内容。 我尝试了不同的想法,但没有一个适合我。 帮我。
<div style="width: 40%">
<mat-card>
<mat-card-header class="card-container">
<mat-card-title class="card-container-right"> Test right</mat-card-title>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
</mat-card>
</div>
如果要继续使用mat-title
元素,也可以执行此操作:
请参阅StackBlitz示例
在你的(我称之为)example-card.component.html文件中
<mat-card >
<mat-card-header>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
<mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
然后在你的example-card.component.css中
.card-container-right{
display: inline;
float: right;
}
.card-container-left{
display: inline;
}
..最后在你的styles.css中
.mat-card-header-text{
width: 100% !important;
}
这方面的技巧是覆盖Angular材料.mat-card-header-text
为mat-card-header
的宽度的100%。 否则它的行为类似于内联元素,只占用其子元素文本的宽度。 防止你将它们隔开。
您可以使用材质设计在mat-toolbar中使用的内容
<mat-card-title>
<span>Test left</span>
<span class="fill-remaining-space"></span>
<span>Test right</span>
</mat-card-title>
在你的.css中
.fill-remaining-space {
flex: 1 1 auto;
}
对不起,这不行!!!!! 在Mat-Toolbar中工作,不在Mat-card Title中。
这是它的工作原理,我知道我曾在某个地方使用它
<mat-card>
<mat-card-title-group>
<span>Test left</span>
<span class="fill-remaining-space"></span>
<span>Test right</span>
</mat-card-title-group>
</mat-card>
请参阅: https : //stackblitz.com/edit/angular-rb5vmu以获取工作示例
在.mat-card-header类上添加自定义css
.mat-card-header{
justify-content: flex-end /* for right*/
justify-content: flex-start /* for left*/
justify-content: centre /* for center*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.