तो मेरे पास एक 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>
0
Demian Licht 4 अक्टूबर 2018, 22:18

1 उत्तर

सबसे बढ़िया उत्तर

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>

या बस अपने घटक का उपयोग करें और खुद को आकार देने का काम करें - निर्देश से परेशान न हों।

1
G. Tranter 4 अक्टूबर 2018, 20:55