آموزش فوتر جاوا اسکریپت در برنامه نویسی آیونیک

4 سال پیش

امتیاز دهید post

آموزش فوتر جاوا اسکریپت در برنامه نویسی آیونیک

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

با استفاده از فوتر

با استفاده از کلاس bar-ion-footer می توان پاورقی Ionic را اضافه کرد. کار با آن همان کار با هدر است. با استفاده از مشخصه align-title می توانیم یک عنوان اضافه کنیم و آن را در سمت چپ، مرکز یا سمت راست صفحه قرار دهیم. با نوار پیشوند می توانیم از رنگ های آیونیک استفاده کنیم. بیایید یک زیر صفحه قرمز رنگ با عنوان در مرکز ایجاد کنیم.

&lt;ion-footer-bar align-title = "center" class = "bar-assertive"&gt;
   &lt;h1 class = "title"&gt;Title!&lt;/h1&gt;
&lt;/ion-footer-bar&gt;

<ion-footer-bar align-title = "center" class = "bar-assertive">

<h1 class = "title">Title!</h1>

</ion-footer-bar>

کد فوق صفحه زیر را تولید می کند –

افزودن عناصر

ما می توانیم آیکون دکمه ها یا سایر عناصر را به نوار زیر یونی اضافه کنیم و سبک آنها اعمال می شود. اجازه دهید یک دکمه و یک آیکون به فوتر خود اضافه کنیم.

&lt;ion-footer-bar class = "bar-assertive"&gt;
   &lt;div class = "buttons"&gt;
      &lt;button class = "button"&gt;Button&lt;/button&gt;
   &lt;/div&gt;
  
   &lt;h1 class = "title"&gt;Footer&lt;/h1&gt;

   &lt;div class = "buttons"&gt;
      &lt;button class = "button icon ion-home"&gt;&lt;/button&gt;
   &lt;/div&gt;
&lt;/ion-footer-bar&gt;

<ion-footer-bar class = "bar-assertive">

<button class = "button">Button</button>

</div>

<h1 class = "title">Footer</h1>

</div>

</ion-footer-bar>

کد فوق صفحه زیر را تولید می کند

افزودن زیر فوتر

ما به شما نشان دادیم که چگونه از یک زیر عنوان استفاده کنید. به همان روشی که می توان یک زیر فوتر ایجاد کرد. در بالای نوار فوتر قرار خواهد گرفت. تمام کاری که ما باید انجام دهیم این است که یک کلاس bar-subfooter به عنصر bar-ion-footer خود اضافه کنیم.

به عنوان مثال، زیر فوتر را در بالای نوار فوتر اضافه می کنیم ، که قبلا ایجاد کردیم.

&lt;ion-footer-bar class = "bar-subfooter bar-positive"&gt;
   &lt;h1 class = "title"&gt;Sub Footer&lt;/h1&gt;
&lt;/ion-footer-bar&gt;

&lt;ion-footer-bar class = "bar-assertive"&gt;
   &lt;div class = "buttons"&gt;
      &lt;button class = "button"&gt;Button&lt;/button&gt;
   &lt;/div&gt;
  
   &lt;h1 class = "title"&gt;Footer&lt;/h1&gt;

   &lt;div class = "buttons" ng-click = "doSomething()"&gt;
      &lt;button class = "button icon ion-home"&gt;&lt;/button&gt;
   &lt;/div&gt;
&lt;/ion-footer-bar&gt;

<ion-footer-bar class = "bar-subfooter bar-positive">

<h1 class = "title">Sub Footer</h1>

</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">

<button class = "button">Button</button>

</div>

<h1 class = "title">Footer</h1>

</div>

</ion-footer-bar>

کد فوق صفحه زیر را تولید می کند –

Ionic Javascript Sub Footer

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

امتیاز دهید post

نویسنده مطلب saber

آموزش فوتر جاوا اسکریپت در برنامه نویسی آیونیک

آموزش فوتر جاوا اسکریپت در برنامه نویسی آیونیک

با استفاده از فوتر

افزودن عناصر

افزودن زیر فوتر

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

بدون دیدگاه

آموزش فوتر جاوا اسکریپت در برنامه نویسی آیونیک

با استفاده از فوتر

افزودن عناصر

افزودن زیر فوتر

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه