标签: mat-card

动态创建卡片时如何将 Mat-Card Mat-card-action 放置在卡片底部

<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{s.header}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p> {{s.Desc}} </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">Submit</button>
        </mat-card-actions>
    </mat-card>
</div>
<div class="col-xs-6 col-md-4 home-content" *ngFor="let s of abc">
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{s.header}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p> {{s.Desc}} </p>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button type="submit" color="primary">Submit</button>
        </mat-card-actions>
    </mat-card>
</div>
Run Code Online (Sandbox Code Playgroud)

css angular-material angular5 mat-card

10
推荐指数
1
解决办法
1万
查看次数

如何在角4中对齐左右文本mat-card-header?

我需要在标题标签左侧和右侧的标题中对齐文本内容。我尝试了不同的想法,但没有一个适合我。帮我。

 <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>
Run Code Online (Sandbox Code Playgroud)

html alignment angular-material angular mat-card

4
推荐指数
2
解决办法
6430
查看次数

我们可以将 Mat-card 与 Anchor Tag 一起使用吗?

我想让 mat-card 成为可点击的,当我将鼠标悬停在 mat-card 上时,我想显示链接光标。有很多卡片,当我点击其中一张卡片时我想要导航到另一页面。我怎样才能实现这个目标?

在我的模板 html 中使用以下代码是否合适?

<a mat-card   routerLink= ...>  Buy  </a>
Run Code Online (Sandbox Code Playgroud)

我的第一次尝试是

        <div fxLayout="row rap">
           <mat-card> 
                <mat-card-content> 
                   <div> $100 </div> 
                   <div> 3000 ETB</div>
               </mat-card-content> 
           </mat-card>
        <mat-card> .... </mat-card>
     </div>
Run Code Online (Sandbox Code Playgroud)

css typescript angular-material angular mat-card

2
推荐指数
1
解决办法
3488
查看次数