ionic – سربرگ

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

افزودن سربرگ

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

اگه شما میخواین یک سربرگ بسازین لازمه که bar-header رو بعد از کلاس  bar اضافه کنین . فایل ٰwww/index.html  رو باز کنین و کلاس header رو  درون تگ body قرار بدین . ما هدر رو در بدنه index.html قرار میدیم چون میخوایم روی تمام صفحات برناممون نمایش داده بشه.

از اونجایی که کلاس bar-header استایل سفید داره شما میتونین خودتون اونو از بقیه صفحه جدا کنین .

<div class="bar bar-header">
   <h1 class="title">سربرگ</h1>
</div>

header-ionic1 رنگ سربرگ

اگه شما بخواین به سربرگ خودتون استایل بدین فقط لازمه که کلاس رنگ رو به اون اضافه کنین . وقتی شما به المنت هاتون استایل میدین شما باید کلاس المنت اصلی رو به عنوان پیشوند کلاس رنگ استفاده کنین . چون ما داریم به نوار سربرگ استایل میدیم ، کلاس پیشوند bar خواهد بود و رنگ کلاسی که میخوایم استفاده کنیم positive (آبی‌) هست :

<div class="bar bar-header bar-positive">
   <h1 class="title">سربرگ</h1>
</div>

کد بالا چنین نتیحه ای خواهد داشت :header-ionic2

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

کلاس توضیح
bar-light سفید
bar-stable خاکستری روشن
bar-positive آبی
bar-calm آبی روشن
bar-balanced سبز
bar-energized نارنجی
bar-assertive قرمز
bar-royal بنفش
bar-dark سیاه

المنت های سربرگ

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

<div class="bar bar-header bar-positive">
   <button class="button icon ion-navicon"></button>
      <h1 class="title">سربرگ</h1>
   <button class="button icon ion-home"></button>
</div>

header-ionic3

سربرگ زیری (sub header )

شما میتونین یه ساب هدر بسازین که دقیقا زیر هدر قرار بگیره . مثال زیر داره نشون میده که چطوری هدر و ساب هدر رو داخل برنامتون قرار بدین . در اینجا ما ساب هدر رو با کلاس assertive ( قرمز )‌استایل دهی کردیم .

<div class="bar bar-header bar-positive">
   <button class="button icon ion-navicon"></button>
      <h1 class="title">سربرگ</h1>
   <button class="button icon ion-home"></button>
</div>

<div class="bar bar-subheader bar-assertive">
   <h2 class="title">Sub Header</h2>
</div>

subheader-ionic

 

باید توجه داشته باشین که هدر و ساب هدر روی برخی از محتوا ها رو میپوشونن .

header-ionic5

برای درست کردن این مساله شما باید کلاس has-header یا has-subheader رو به تگ ion-content  خودتون اضافه کنین . یکی از فایل های html داخل www/templates  رو باز کنین و کلاس has-subheader رو به ion-content اضافه کنین . اگه شما فقط از هدر استفاده میکنین در عوض کلاس has-header رو اضافه کنین .

<ion-content class="padding has-subheader">

کد بالا نتیجه زیر رو خواهد داشت :
sub-header

میبینین که درست شد!

پاسخ دهید

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