ionic – فوتر

فوتر آیونیک در پایین برنامه قرار میگیره . کار کردن با فوتر تقریبا مثل کار کردن با هدر هست .

افزودن فوتر

کلاس اصلی برای فوتر آیونیک bar  هست (‌مثل هدر ) . وقتی شما میخواین فوتر رو به صفحه اضافه کنین شما باید کلاس bar-footer   رو به المنتتون اضافه کنین ( بعد از کلاس bar ) از اونجایی که ما فوتر رو برای تمام صفحات برنامه لازم داریم ، ما اون رو درون body فایل index.html قرار میدیم . همینطور یک عنوان برای فوترمون قرار میدیم .

  <div class="bar bar-footer">
      <h1 class="title">فوتر!</h1>
  </div>

footer-ionic

رنگ های فوتر

اگه شما میخواین به فوتر خودتون استایل بدین کافیه کلاس رنگ رو بهش اضافه کنین . وقتی شما به المنتتون استایل میدین لازمه که از المنت اصلی ( bar ) به عنوان پیشوند استفاده کنین و بعدش از اسم رنگ استفاده کنین  در اینجا  assertive هست ( قرمز ) .

<div class="bar bar-footer bar-assertive">
   <h1 class="title">فوتر!</h1>
</div>

ionic-footer-red

طبق معمول شما میتونین از ۹ کلاس مختلف برای رنگ دادن به فوتر خودتون اسفتاده کنین :

bar-light , bar-stable . bar-positive , bar-calm , bar-balanced , bar-energized , bar-assertive, bar-royal, bar-dark

برای اطلاع بیشتر به بخش رنگ بندی برین .

المنت های فوتر :

فوتر میتونه شامل المنت هایی در داخل خودش بشه . بیشتر اوقات لازمه که شما یک دکمه به همراه آیکون داخل فوتر قرار بدین .

اولین دکمه همیشه در سمت چپ قرار میگیره و آخریش همیشه در سمت راست . دکمه هایی که در این بین قرار میگیرند به صورت گروهی بعد از دکمه سمت چپ فوتر قرار میگیرن . در مثال پایین شما همینطور میبینین که از کلاس icon  هم استفاده کردیم برای اضافه شدن آیکون ها به دکمه ها.

iocin-footer-3

و اگه بخواین دکمه خودتون رو به سمت راست بیارین باید کلاس pull-right این کار رو انحام بدن :

<div class="bar bar-footer bar-assertive">
   <button class="button icon ion-navicon pull-right"></button>
</div>

که نتیجه ش این خواهد بود :ionic-footer-4

پاسخ دهید

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