ionic – لیست ها

لیست ها یکی از معروف ترین المنت های هر صفحه وب یا برنامه موبایلی هستند . اون ها معمولا برای نمایش اطلاعات متغیر ها استفاده میشن . از ترکیب اون ها با المنت های دیگه html میشه منو ها تب ها یا حتی برای تغییر یکنواختی یک متن خالص . آیونیک نوع های مختلفی لیست ها رو شامل میشه .

ساخت لیست آیونیک

هر لیست از ۲ المنت ساخته شده. وقتی شما میخواین یک لیست ساده بسازین تگ <ul> شما باید کلاس  list داشته باشه  & و تگ <li> ااز کلاس item استفاده کنه . نکته جالب اینه که شما مجبورر نیستین از تگ های ul , ol وli برای لیست هاتون استفاده کنین . شما میتونین هر المنت دیگه ای رو به کار ببرین ولی نکته مهم اینه که کلاس های مناسب برای لیست و آیتم رو استفاده کنین .

<div class="list">
   <div class="item">آیتم ۱</div>
   <div class="item">آیتم ۲</div>
   <div class="item">آیتم ۳</div>
</div>

نتیجه کد بالا :»

 

ionic-list2

Inset List

وقتی شما یک لیست میخواین تا یک بخش رو به طور کامل پر کنین ، شما میتونین کلاس list-inset رو بعد از کلاس list اضافه کنین. این کار باعث اضافه شدن مقداری فاصله ( margin ) به اون میشه و سایزش رو به اندازه المنت والد میکنه .

ionic-list-3

جدا کننده المنت ها

جدا کننده ها برای نظم دهی برخی المنت ها در داخل چند گروه استفاده می شن . آیونیک از کلاس item-divider برای این کار استفاده میکنه . مثل بقیه المنت های ایونیک ما باید کلاس item-divider رو بعد از کلاس item اضافه کنیم . جدا کننده (divider ) ها به به عنوان سرلیست خیلی خوب استفاده میشن چون به طور عادی نسبت به بقیه آیتم لیست ها استایل درشت تری دارند .

  <div class="list">
    <div class="item item-divider">جدا کننده اول</div>
    <div class="item">آیتم ۱</div>
    <div class="item">آیتم ۲</div>
    <div class="item">آیتم ۳</div>

    <div class="item item-divider">جدا کننده دوم</div>
    <div class="item">آیتم ۴</div>
    <div class="item">آیتم ۵</div>
    <div class="item">آیتم ۶</div>
  </div>

نتیجه ش :

ionic-list-divider

افزودن آیکون :

در جلسات قبلی این رو که چطوری آیکون رو به دکمه ها اضافه کنیم رو آموزش دادیم . برای اضافه کردن آیکون به لیست شما باید مشخص کنین که آیکون شما کدوم سمت لیست باشه ( راست یا چپ ) . کلاس item-icon-left  و item-icon-right  برای این کار وجود داره . شما همین طور میتونین از هر دو کلاس استفاده کنین اگه میخواین آیکون در دو سمت لیست نمایش داده بشه . همینطور یک کلاس به نام item-note   برای اضافه کردن توضیح به لیست هست .

 <div class="list">
    <div class="item item-icon-left">
      <i class="icon ion-home"></i>
آیکون در سمت چپ    </div>

    <div class="item item-icon-right">
      <i class="icon ion-star"></i>
    آیکون در سمت راست</div>

    <div class="item item-icon-left item-icon-right">
      <i class="icon ion-home"></i>
      <i class="icon ion-star"></i>
آیکون در دو طرف    </div>

    <div class="item item-icon-left">
      <i class="icon ion-home"></i>
      <span class="text-note">یک توضیح ریز</span>
    </div>
  </div>

ionic-list-icon

اضافه کردن تصویر و آواتار

عکس های ریز(thumbnails) و آواتار ها مثل هم هستن . تفاوت اصلی اینه که آواتار کوچک تر از تصاویر هست . عکس های ریز تقریبا تمام ارتفاع لیست رو پوشش میدن اما آواتار ها از اندازه متوسطی برخوردارن و همینطور گرد هستن . دو تا کلاسی که ما استفاده میکنیم item-avatar و item-thumbnail  هست . شما همینطور میتونین انتخاب کنین تصویر یا آواتارتون رو کدوم سمت قرار بدین . بهتره  کاربردش رو توی مثال ببینین  :

  <div class="list">
    <div class="item item-avatar">
      <img src="./img/my-cat.jpg">
      <h3>آواتار</h3>
    </div>

    <div class="item item-thumbnail-left">
      <img src="./img/my-cat.jpg">
      <h3>تصویر </h3>
    </div>
  </div>

 

ionic-ax-avatar

 

پاسخ دهید

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