Ionic - karty

Ponieważ urządzenia mobilne mają mniejszy rozmiar ekranu, karty są jednym z najlepszych elementów do wyświetlania informacji, które będą przyjazne dla użytkownika. W poprzednim rozdziale omówiliśmy, jak wstawiać listy. Karty są bardzo podobne do list wstawianych, ale oferują dodatkowe cienie, które mogą wpływać na wydajność w przypadku większych list.

Dodawanie kart

Kartę domyślną można utworzyć, dodając plik cardklasy do swojego żywiołu. Karty są zwykle tworzone jako listy z rozszerzeniemitemklasa. Jedną z najbardziej przydatnych klas jestitem-text-wrap. Pomoże to, gdy masz za dużo tekstu, więc chcesz umieścić go w karcie. Pierwsza karta w poniższym przykładzie nie ma rozszerzeniaitem-text-wrap przypisana klasa, ale druga z niej korzysta.

<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>

Powyższy kod wygeneruje następujący ekran -

Nagłówek i stopka karty

W poprzednim rozdziale omówiliśmy już, jak używać item-dividerklasa do grupowania list. Ta klasa może być bardzo przydatna podczas pracy z kartami w celu tworzenia nagłówków kart. Ta sama klasa może być używana dla stopek, jak pokazano w poniższym kodzie -

<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>

Powyższy kod wygeneruje następujący ekran -

Complete Card

Możesz dodać dowolny element na karcie. W poniższym przykładzie pokażemy, jak używaćfull-image klasa wraz z item-body aby uzyskać dobrze wyglądający obraz w oknie na karcie.

<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>

Powyższy kod wygeneruje następujący ekran -