ไอออนิก - การ์ด

เนื่องจากอุปกรณ์เคลื่อนที่มีขนาดหน้าจอที่เล็กกว่าการ์ดจึงเป็นองค์ประกอบที่ดีที่สุดอย่างหนึ่งสำหรับการแสดงข้อมูลที่จะทำให้ผู้ใช้รู้สึกเป็นมิตร ในบทที่แล้วเราได้พูดถึงวิธีการแทรกรายการ การ์ดมีลักษณะคล้ายกับรายการแทรก แต่มีเงาเพิ่มเติมบางอย่างที่สามารถส่งผลต่อประสิทธิภาพของรายการขนาดใหญ่

การเพิ่มการ์ด

การ์ดเริ่มต้นสามารถสร้างได้โดยการเพิ่มไฟล์ cardคลาสให้กับองค์ประกอบของคุณ การ์ดมักจะสร้างเป็นรายการที่มีitemชั้นเรียน. หนึ่งในคลาสที่มีประโยชน์ที่สุดคือitem-text-wrap. วิธีนี้จะช่วยได้เมื่อคุณมีข้อความมากเกินไปคุณจึงต้องการห่อไว้ในการ์ด การ์ดใบแรกในตัวอย่างต่อไปนี้ไม่มีitem-text-wrap คลาสที่กำหนด แต่คลาสที่สองกำลังใช้มัน

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

โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -

ส่วนหัวและส่วนท้ายของการ์ด

ในบทที่แล้วเราได้กล่าวถึงวิธีการใช้งานไฟล์ item-dividerคลาสสำหรับการจัดกลุ่มรายการ คลาสนี้จะมีประโยชน์มากเมื่อทำงานกับการ์ดเพื่อสร้างส่วนหัวการ์ด คลาสเดียวกันสามารถใช้กับส่วนท้ายได้ดังแสดงในรหัสต่อไปนี้ -

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

โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -

บัตรที่สมบูรณ์

คุณสามารถเพิ่มองค์ประกอบใดก็ได้ที่ด้านบนของการ์ดของคุณ ในตัวอย่างต่อไปนี้เราจะแสดงวิธีใช้ไฟล์full-image เรียนร่วมกับ item-body เพื่อให้ได้ภาพหน้าต่างที่ดูดีภายในการ์ดของคุณ

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

โค้ดด้านบนจะแสดงหน้าจอต่อไปนี้ -