آموزش زبانه ها در برنامه نویسی آیونیک
آموزش زبانه ها در برنامه نویسی آیونیک
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش زبانه ها در برنامه نویسی آیونیک خواهیم پرداخت.
زبانه ها در برنامه نویسی آیونیک بیشتر اوقات برای ناوبری موبایل استفاده می شوند. یک ظاهر طراحی شده برای سیستم عامل های مختلف بهینه شده است. این بدان معنی است که در دستگاه های اندرویدی، تب ها در بالای صفحه قرار می گیرند، در حالی که در IOS در پایین قرار دارد. روش های مختلفی برای ایجاد برگه ها وجود دارد. ما نحوه ایجاد زبانه ها را در این فصل با جزئیات درک خواهیم کرد.
زبانه های ساده
منوی Simple Tabs را می توان با کلاس tab ها ایجاد کرد. برای عنصر داخلی که از این کلاس استفاده می کند، باید عناصر tab-item را اضافه کنیم. از آنجا که معمولاً از برگه ها برای پیمایش استفاده می شود ، از تگ های <a> برای موارد برگه استفاده خواهیم کرد. مثال زیر منویی با چهار زبانه را نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class = "tabs"> <a class = "tab-item"> Tab 1 </a> <a class = "tab-item"> Tab 2 </a> <a class = "tab-item"> Tab 3 </a> </div> |
کد فوق صفحه زیر را تولید می کند –
افزودن آیکون ها
Ionic کلاسهایی را برای افزودن آیکون به زیانه ها ارائه می دهد. اگر می خواهید برگه های شما دارای آیکون بدون متن باشند، پس از کلاس زیانه ها، یک کلاس فقط زیانه ها اضافه می شود. البته، شما باید آیکون هایی را که می خواهید نمایش داده شوند اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class = "tabs tabs-icon-only"> <a class = "tab-item"> <i class = "icon ion-home"></i> </a> <a class = "tab-item"> <i class = "icon ion-star"></i> </a> <a class = "tab-item"> <i class = "icon ion-planet"></i> </a> </div> |
کد فوق صفحه زیر را تولید می کند –
همچنین می توانید آیکون ها و متن را با هم اضافه کنید. tabs-icon-top و tabs-icon-left کلاسهایی هستند که نماد را به ترتیب در بالا یا سمت چپ قرار می دهند. پیاده سازی همان مثالی است که در بالا آورده شد ، ما فقط یک کلاس و متن جدید اضافه می کنیم که می خواهیم استفاده کنیم. مثال زیر نمادهایی را نشان می دهد که بالای متن قرار گرفته اند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class = "tabs tabs-icon-top"> <a class = "tab-item"> <i class = "icon ion-home"></i> Tab 1 </a> <a class = "tab-item"> <i class = "icon ion-star"></i> Tab 2 </a> <a class = "tab-item"> <i class = "icon ion-planet"></i> Tab 3 </a> </div> |
کد فوق صفحه زیر را تولید می کند –
زبانه های striped
زبانه های striped را می توان با افزودن ظرفی در اطراف برگه های ما با کلاس tab-striped ایجاد کرد. این کلاس امکان استفاده از پیش زمینه های تب ها و پیشوندهای رنگ زبانه ها برای افزودن برخی از رنگ های آیونیک به منوی زبانه ها را دارد.
در مثال زیر ، از کلاس tabs-background-positive (blue) برای تنظیم پس زمینه منو ، و از کلاس tabs-color-light (white) برای استایل نمادهای Tab استفاده خواهیم کرد. به تفاوت تب دوم که فعال است و دو تای دیگر که فعال نیستند توجه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class = "tabs-striped tabs-background-positive tabs-color-light"> <div class = "tabs"> <a class = "tab-item"> <i class = "icon ion-home"></i> </a> <a class = "tab-item active"> <i class = "icon ion-star"></i> </a> <a class = "tab-item"> <i class = "icon ion-planet"></i> </a> </div> </div> |
کد فوق صفحه زیر را تولید می کند –
لیست جلسات قبل آموزش برنامه نویسی آیونیک
- آموزش برنامه نویسی آیونیک
- نگاهی کلی به آموزش برنامه نویسی آیونیک
- آموزش تنظیمات محیطی در برنامه نویسی آیونیک
- آموزش رنگ ها در برنامه نویسی آیونیک
- آموزش ایجاد محتوا در برنامه نویسی آیونیک
- آموزش هدر در برنامه نویسی آیونیک
- آموزش فوتر در برنامه نویسی آیونیک
- آموزش دکمه ها در برنامه نویسی آیونیک
- آموزش لیست ها در برنامه نویسی آیونیک
- آموزش کارت ها در برنامه نویسی آیونیک
- آموزش فرم ها در برنامه نویسی آیونیک
- آموزش Toggle در برنامه نویسی آیونیک
- آموزش چک باکس در برنامه نویسی آیونیک
- آموزش دکمه های رادیویی در برنامه نویسی آیونیک
- آموزش محدوده در برنامه نویسی آیونیک
- آموزش Select در برنامه نویسی آیونیک
.svg)
دیدگاه شما