Angular MatCardHeader :在右侧放置垫子-卡片-头像

Question

<mat-card-header>
            <mat-card-title>Shiba Inu</mat-card-title>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>

这将把垫卡头像放在左边，在垫子卡片头中是否有任何配置允许将头像移动到头像的右端

Answer 1

您可以尝试这样做：

::ng-deep .mat-card-header{
        flex-direction: row-reverse !important;
}
    
::ng-deep  .mat-card-avatar{
    width: 10%;
}
        
::ng-deep  .mat-card-header-text{
   width: 90%;
}

Answer 2

没有官方的方法，因为如果你看到他们的mat-card-header source code，他们会把头像放在第一位，然后是文本。

<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
<div class="mat-card-header-text">...</div>
<ng-content></ng-content>

您必须手动覆盖样式。因为它是一个flexbox，你可以很容易地覆盖它，而不需要像这样改变HTML。

<mat-card-header class="mat-card-header-avatar-right">
  <div mat-card-avatar class="example-header-image"></div>
  <mat-card-title>Shiba Inu</mat-card-title>
  <mat-card-subtitle>Dog Breed</mat-card-subtitle>
</mat-card-header>

//SCSS Version
.mat-card-header-avatar-right {
    justify-content: space-between;
    &::ng-deep {
        .mat-card-header-text {
            margin-left: 0 !important;
        }
    }
    .mat-card-avatar {
        order: 1;
    }
}

//CSS Version
.mat-card-header-avatar-right {
  justify-content: space-between;
}

.mat-card-header-avatar-right ::ng-deep .mat-card-header-text {
  margin-left: 0 !important;
}

.mat-card-header-avatar-right .mat-card-avatar {
  order: 1;
}