ionic – فرم ها

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

 استفاده از فرم ورودی ( input form)

بهنرین راه برای استفاده از فرم ها استفاده از list و item  به عنوان کلاس اصلیتون هست . برنامه شما معمولا شامل بیشتر از یک المنت میشه پس باید به صورت لیست دسته بندی بشه . در مثال پایین شما میتونین متوجه بشین که المنت یک تگ label هست .

شما میتونین از هر المنت دیگه ای استفاده کنین اما label این توانایی رو داره که هر جایی از المنت رو که لمس کنین ( tap )  روی روردی متن شما فوکوس انجام میشه .  شما میتونین placeholder   رو هم عوض کنین که از مقدار پیشفرضش متفاوت بشه ، همونطور که میدونین وقتی روی  placeholder شروع به تایپ کنین دیگه دیده نمیشه . حالا توی این مثال کاربردش رو میبینین :

ionic-placeholder

برچسب های (label) آیونیک

آیونیک دارای چند آپشن دیگه برای برچسب های شماست. اگه شما بخواین یک برچسب در سمت چپ placeholder خودتون داشته باشین میتونین از کلاس input-label  استفاده کنین.

  <div class="list">
    <label class="item item-input">
      <span class="input-label">Label 1</span>
      <input type="text" placeholder="Placeholder 1">
    </label>

    <label class="item item-input">
      <span class="input-label">Label 2</span>
      <input type="text" placeholder="Placeholder 2">
    </label>
  </div>

که نتیجه ش باید اینطوری بشه :

ionic-label-2

برچسب پشته ای (؟!) (Stacked Label)

Stacked Label یک گزینه دیگه هست که به شما این اجازه رو میده که برچسب خودتون رو به بالا یا پایین input قرار بدین .برای رسیدن به این مورد ما کلاس item-stacked-label  رو به المنت های خودمون اضافه میکنیم و ما باید یک المنت دیگه درست کنیم و کلاس input-label  رو بهش بدیم .

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

<div class="list">
   <label class="item item-input item-stacked-label">
   <span class="input-label">Label 1</span>
   <input type="text" placeholder="Placeholder 1">
   </label>

   <label class="item item-input item-stacked-label">
   <span class="input-label">Label 2</span>
   <input type="text" placeholder="Placeholder 2">
   </label>
</div>

ionic-label3

برچسب شناور

برچسب های شناور گزینه سومی هستن که ما میتونیم استفاده کنیم . این برجسب ها قبل از شرو به تایپ کردن ما مخفی هستن و به محض اینکه شروع به تایپ کنید در بالای المنت با افکت خوبی نمایان می شوند . ما میتونیم از برچسب های شناور دقیقا مثل برچسب های پشته ای استفاده کنیم . تنها فرقش اینه که اینجا باید از کلاس  item-floating-label  استفاده کنیم .ionic-floating-label

ورودی های الحاقی (Inset inputs )

در آخرین آموزشمون ما بهتون نشون دادیم که چطوری از المنت های inset آیونیک استفاده کنیم . شما همینطوری میتونین یک input رو با استفاده از کلاس item-input-inset  به آیتم خودتون و item-input-wrapper  به برچسب خودتون inset  کنین  .

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

در مثال زیر ۲ تا inset input وجود داره . در اولی یک دکمه بعد از برچسب قرار گرفته و در دومی یک آیکون در درونش . ما از کلاس placeholder-icon برای ساخت آیکون به همون رنگ placeholder استفاده کردیم . بدون اون آیکون از رنگ برچسب استفاده میکنه .

اینم نتیجه ش:

ionic-inset-input

 

پاسخ دهید

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