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

4 سال پیش

امتیاز دهید post

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

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

استفاده از هدر جاواسکریپت

برای ایجاد یک نوار هدر جاوا اسکریپت ، ما باید دستورالعمل ion-header-bar را در پرونده HTML اعمال کنیم. از آنجا که هدر پیش فرض سفید است، عنوان را اضافه می کنیم، بنابراین در پس زمینه سفید نشان داده می شود. ما آن را به پرونده index.html خود اضافه خواهیم کرد.

&lt;ion-header-bar&gt;
   &lt;h1 class = "title"&gt;Title!&lt;/h1&gt;
&lt;/ion-header-bar&gt;

<ion-header-bar>

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

</ion-header-bar>

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

استایل دهی هدر

دقیقاً مانند نوار هدر CSS، مدل مشابه JavaScript نیز می تواند به روشی مشابه طراحی شود. برای اعمال رنگ، باید یک کلاس رنگی با پیشوند نوار اضافه کنیم. بنابراین ، اگر بخواهیم از یک سربرگ آبی استفاده کنیم ، یک کلاس نوار مثبت اضافه خواهیم کرد. همچنین می توانیم با افزودن ویژگی align-title عنوان را به یک طرف صفحه منتقل کنیم. مقادیر این ویژگی می تواند مرکز ، چپ یا راست باشد.

&lt;ion-header-bar align-title = "left" class = "bar-positive"&gt;
   &lt;h1 class = "title"&gt;Title!&lt;/h1&gt;
&lt;/ion-header-bar&gt;

<ion-header-bar align-title = "left" class = "bar-positive">

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

</ion-header-bar>

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

افزودن عناصر

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

&lt;ion-header-bar class = "bar-positive"&gt;
   &lt;div class = "buttons"&gt;
      &lt;button class = "button"&gt;Button&lt;/button&gt;
   &lt;/div&gt;
   
   &lt;h1 class = "title"&gt;Title!&lt;/h1&gt;
   &lt;div class = "buttons"&gt;
      &lt;button class = "button icon ion-home"&gt;&lt;/button&gt;
   &lt;/div&gt;
&lt;/ion-header-bar&gt;

<ion-header-bar class = "bar-positive">

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

</div>

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

</div>

</ion-header-bar>

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

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

یک هدر Sub هنگامی ایجاد می شود که یک کلاس bar-subheader به نوار header-ion اضافه شود. ما برای اعمال رنگ قرمز به عنوان زیر، یک کلاس قاطعانه اضافه خواهیم کرد.

&lt;ion-header-bar class = "bar-positive"&gt;
   &lt;div class = "buttons"&gt;
      &lt;button class = "button"&gt;Button&lt;/button&gt;
   &lt;/div&gt;
   
   &lt;h1 class = "title"&gt;Title!&lt;/h1&gt;
   &lt;div class = "buttons"&gt;
      &lt;button class = "button icon ion-home"&gt;&lt;/button&gt;
   &lt;/div&gt;
&lt;/ion-header-bar&gt;

&lt;ion-header-bar class = "bar-subheader bar-assertive"&gt;
   &lt;h1 class = "title"&gt;Subheader&lt;/h1&gt;
&lt;/ion-header-bar&gt;

<ion-header-bar class = "bar-positive">

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

</div>

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

</div>

</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">

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

</ion-header-bar>

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

Ionic Header Bar Sub-Header

منبع.

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

امتیاز دهید post

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

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

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

استفاده از هدر جاواسکریپت

استایل دهی هدر

افزودن عناصر

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

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

دیدگاه شما

بدون دیدگاه

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

استفاده از هدر جاواسکریپت

استایل دهی هدر

افزودن عناصر

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

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

دیدگاه شما

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

بدون دیدگاه