İyonik - Kartlar

Mobil cihazlar daha küçük ekran boyutuna sahip olduğundan kartlar, kullanıcı dostu hissettirecek bilgileri görüntülemek için en iyi unsurlardan biridir. Önceki bölümde, listelerin nasıl ekleneceğini tartışmıştık. Kartlar, ekli listelere çok benzer, ancak daha büyük listelerin performansını etkileyebilecek bazı ek gölgeleme sunarlar.

Kart Ekleme

Bir varsayılan kart eklenerek oluşturulabilir cardelemanınıza sınıf. Kartlar genellikleitemsınıf. En kullanışlı sınıflardan biri,item-text-wrap. Bu, çok fazla metniniz olduğunda yardımcı olacaktır, bu yüzden onu kartınızın içine sarmak isteyebilirsiniz. Aşağıdaki örnekteki ilk kart,item-text-wrap sınıf atandı, ancak ikincisi onu kullanıyor.

<div class = "card">
   <div class = "item">
      This is a Ionic card without item-text-wrap class.
   </div>
   
   <div class = "item item-text-wrap">
      This is a Ionic card with item-text-wrap class.
   </div>
</div>

Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -

Kart Üstbilgisi ve Altbilgi

Önceki bölümde, nasıl kullanılacağını zaten tartışmıştık. item-dividerlisteleri gruplamak için sınıf. Bu sınıf, kart başlıkları oluşturmak için kartlarla çalışırken çok yararlı olabilir. Aşağıdaki kodda gösterildiği gibi aynı sınıf altbilgiler için kullanılabilir -

<div class = "card list">
   <div class = "item item-divider">
      Card header
   </div>
   
   <div class = "item item-text-wrap">
      Card text...
   </div>
   
   <div class = "item item-divider">
      Card Footer
   </div>
</div>

Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -

Tam Kart

Kartınızın üstüne herhangi bir öğe ekleyebilirsiniz. Aşağıdaki örnekte, size nasıl kullanılacağını göstereceğizfull-image ile birlikte sınıf item-body kartınızın içinde iyi görünen pencereli bir görüntü elde etmek için.

<div class = "card">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h2>Card Name</h2>
   </div>

   <div class = "item item-body">
      <img class = "full-image" src = "my-image.png">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget 
      pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci. 
      Nam tristique elit massa, quis faucibus augue finibus ac.
   </div>
</div>

Yukarıdaki kod aşağıdaki ekranı oluşturacaktır -