Несколько изображений на мат-карте - PullRequest
Новая
       8

Несколько изображений на мат-карте

0 голосов
/ 04 октября 2018

Таким образом, у меня есть 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>

1 Ответ

0 голосов
/ 04 октября 2018

Директива 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>

Или просто использовать свой компонент и самостоятельно определять размеры - не беспокойтесь о директиве.

...