ionic – کارت ها

از اونجایی که دستگاه های موبایل صفحه نمایش کوچک تری دارند ، کارت ها میتونین یکی از بهترین المنت هایی باشن که میشه باهاش اطلاعات  رو کاربرپسندانه(!) نمایش داد .توی آخرین آموزشمون بهتون نشون دادیم لیست های داخل آیونیک چطوری کار میکنن . کارت ها خیلی به لیست های آیونیک نزدیکن اما با چند چیز بیشتر رو دارن که میتونه لیست های بزرگتر رو بهتر کنه .

اضافه کردن کارت ها

کارت های پیشفرض با اضافه کردن کلاس  card به المنت ها ساخته میشن . کارت ها معمولا به صورت لیست ، فرم میگیرن که با کلاس item هست . یک کلاس مفید دیگه item-text-wrap  هست . که وقتی شما متن نسبتا بزرگی دارین بهتون کمک میکنه چون شما میخواین فضای متنتون به درون کارت محدود بشه . توی مثال زیر اولین کارت کلاس item-text-wrap  رو نداره ولی دومی داره از این کلاس استفاده میکنه .

  <div class="card">
    <div class="item">
این متن بدون کلاس item-text-wrap هست و محدود نشده ! پس اضافه متن از کادر بیرون میزنه
    <div class="item item-text-wrap">
این آیتم محدود شده ... امیدوارم متوجه تفاوتش شده باشین برای همین من یه مقدار بهش شاخ و برگ میدم...   </div>
  </div>
  </div>

ionic-card1

ساخت هدر و فوتر

ما تا حالا به شما گفتیم که چطور از item-divider  برای گروه بندی لیست ها استفاده کنیم . این کلاس برای ساخت هدر برای کارت ها استفاده میشه .  همینطور میشه ازش به عنوان فوتر کارت هم استفاده کرد . اینطوری :

  <div class="card list">
    <div class="item item-divider">
سربرگ کارت
    </div>

    <div class="item item-text-wrap">
    متن کارت ...
    </div>

    <div class="item item-divider">
  فوتر کارت
    </div>
  </div>

که نتیجه اش اینطوری خواهد شد  :

ionic-cart-head-and-footer

کارت کامل

شما میتونین به بالای کارت خودتون المنت اضافه کنین . در مثال پاینن ما به شما نشون میدیم که چطوری از کلاس full-image  همراه با item-body استفاده کنین تا به یک ظاهر معقول درون کارتتون برسید.

ionic-full-cart

ionic-full-cart

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *