ionic – دکمه ها

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

Block Buttons

دکمه های بلوک همیشه ۱۰۰٪ عرض container  والدشون رو میگیرن و اونا همینطور یک padding کوچیک دارن . برای اضافه کردنشون باید ازکلاس butten-block استفاده کنین . اگه میخواین padding نداشته باشین ولی همچنان ۱۰۰% باشین از کلاس button-full استفاده کنین .

در زیر یک مثال برای نشون دادن استفاده هر ۲ کلاس آورده شده :

  <button class="button button-block">
    button-block
  </button>

  <button class="button button-full">
    button-full
  </button>

button-block1

که میبینین تفاوت های خیلی جزئی ای دارن .

اندازه دکمه ها :

۲ تا کلاس آیونیک برای تغییر اندازه دکمه ها وجود داره ( که با سایز پیشفرض میشه ۳ تا سایز ) :

button-small و button-large

اینجا نحوه استفاده شون مثال زده شده :

  <button class="button button-small">
من دکمه کوچیک هستم
  </button>
<br>
<br>

  <button class="button button-large">
  من دکمه بزرگ هستم
  </button>

ionic-small-big-button

رنگ بندی دکمه ها :‌

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

<button class="button button-assertive">
دکمه قرمز
</button>

red-button

۹ کلاس رنگ قابل استفاده در صفحه رنگ بندی هست و میتونین بخونینشون

کناره های دکمه ها

اگه شما میخواین دکمه ها شفاف باشن میتونین ازکلاس button-outline استفاده کنین . دکمه هایی که این کلاس رو دارن دارای یک حاشیه در دورشون خواهند بود و بکگراندشون هم شفاف در نظرگرفته میشه .

  <button class="button button-assertive button-outline">
دکمه با حاشیه  </button>
<br>
  <button class="button button-assertive button-clear">
   دکمه بدون حاشیه و بکگراند
  </button>

ionic-Button-border

افزودن آیکون به دکمه ها

وقتی شما میخواین آیکون های خودتون رو اضافه کنین ، بهترین راه این هست که از کلاس icon استفاده کنین . شما میتونین با استفاده ازicon-left یا icon-right  آیکون رو ببرین به یک سمت دکمه خودتون . معمولا وقتی که داخل دکمه یک متن موجود باشه لازمه که چنین کاری رو انجام بدین . اینم مثال برای این کار :

  <button class="button icon ion-home">
  </button>

  <button class="button icon icon-left ion-home">
    خانه
  </button>

  <button class="button icon icon-right ion-home">
    خانه
  </button>

ionic-btn-iconadd نوار دکمه ها :

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

<div class="button-bar">
   <a class="button button-positive">1</a>
   <a class="button button-assertive">2</a>
   <a class="button button-energized">3</a>
   <a class="button">4</a>
</div>

که نتیجه ش به این شکل میشه : ionic-btn-group

پاسخ دهید

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