时间戳

首页 > 解决方案 > 垫卡中的多个图像

angular - 垫卡中的多个图像

问题描述

所以我有一个mat-tab-group依次mat-card为每个选项卡显示一个。每张卡片代表一个酒店房间。

我想以某种方式在垫卡的图像部分显示几张图像，作为各种画廊。有没有办法做到这一点？

这是我当前的 HTML 模板：

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{room.name}}</mat-card-title>
    <mat-card-subtitle>${{room.price}} por noche</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      {{room.details}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button>Book</button>
    <button mat-button>Share</button>
  </mat-card-actions>
</mat-card>

标签： angularangular-materialmaterial-design

解决方案

该mat-card-image指令可以应用于除 之外的其他元素img。它仅用于将项目拉伸到全宽。因此，您可以创建一个组件来提供您的“画廊”体验，并使用它来代替img：

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>{{room.name}}</mat-card-title>
    <mat-card-subtitle>${{room.price}} por noche</mat-card-subtitle>
  </mat-card-header>
  <my-image-gallery mat-card-image></my-image-gallery>
  <mat-card-content>
    <p>
      {{room.details}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button>Book</button>
    <button mat-button>Share</button>
  </mat-card-actions>
</mat-card>

或者只是使用您的组件并自己处理大小 - 不要打扰指令。

推荐阅读