ionic – رنگ بندی

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

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

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

کلاس های رنگ آیونیک

 

Class توضیح
light سفید
stable خاکستری
positive آبی
calm آبی کمرنگ
balanced سبز
energized زرد
assertive قرمز
royal بنفش
dark سیاه

استفاده از رنگ های آیونیک

آیونیک از کلاس های مختلفی برای هر المنت خود استفاده میکند . برای مثال یک هدر دارای کلاس bar خواهد بود و یک دکمه کلاس button خواهد داشت . برای ساده کردن ، ما از رنگ ها به همراه پیشوند کلاس المنت استفاده میکنیم !

برای مثال برای ساختن یک هدر آبی ما از bar-calm اینطوری استفاده میکنیم :

<div class="bar bar-header bar-calm">
  ...
</div>

همینطور برای ساختن یک دکمه خاکستری ما از  کلاس button-stable استفاده میکنیم :

<div class="button button-stable">
  ...
</div>

همینطور شما میتونین از کلاس های مخصوص رنگ آیونیک به صورت جداگانه مثل هر کلاس css دیگه ای استفاده کنین ، مثلا ما دو تا پاراگراف رو رنگ کردیم‌:

<p class="balanced">پاراگراف اول...</p>
<p class="energized">پاراگراف دوم ...</p>

که این شکلی خواهند شد :

 

 

 

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

تغییر رنگ ها با استفاده از CSS

اگه شما میخواین بعضی از تنظیمات آیونیک رو با استفاده از CSS تغییر بدین ، شما میتونین این کار رو با ادیت کردن lib/css/ionic.css انجام بدین . در برخی موارد این دستکاری ها خیلی خوب از آب در نمیان چون هر المنت (header, button, footer…) از استایل خودش برای استایل دادن استفاده میکنه پس اگه شما میخواین کلاس light رو به narenji تغییر بدین باید تمام چیز هایی که از light استفاده میکنن رو به narenji  تغییر بدین . این روش برای تغییر یک المنت خیلی کارآمد هست و برای تغییر کلی باید حواستون رو بیشتر جمع کنین .

تغییر رنگ ها با استفاده از SASS

sass روش ساده تریه برای اینکه رنگ تمام المنت ها رو به یکباره عوض کنین. اگه شما میخواین از sass استفاده کنین میتونین از این دستور استفاده کنین :
parham@parham-pc:~/Documents/Projects/ionic/test$ ionic setup sass<br />

این دستور sass رو برای پروژه شما تنظیم میکنه. حالا برای تغییر دادن رنگ های پیشفرض اگه شما فایل  scss/ionic.app.scss  رو باز کنین و خطوط زیر رو قبل از خط @import “www/lib/ionic/scss/ionic”; اضافه کنین ما خاکستری رو به آبی پررنگ تغییر خواهیم داد ، و همینطور  رنگ نارنجیمون رو.

۲ پاراگرافی که ما در بالا استفاده کردیم الآن نارجی پرتغالی! و سرمه ای شدن .

$balanced: #000066 !default;
$energized: #FFA500 !default;

حالا اگه ما از مثال زیر استفاده کنیم :

<p class="balanced">پاراگراف۱...</p>
<p class="energized">پاراگراف۲...</p>

 

چنین نتیجه ای خواهد داشت :

 

 

همه المنت هایی که از این کلاس ها استفاده میکنن به نارنجی و سرمه ای تغییر پیدا میکنن . توجه کنید که شما نیاز ندارید که از رنگ های پیشفرض آیونیک استفاده کنین . شما همیشه میتونین المنت هاتون رو هر طور که میخواین طراحی کنین .

نکته مهم

بعد از نصب sass فایل www/css/style.css  از هدر index.html پاک میشه بنابر این اگه میخواین ازش استفاده کنین شما میتونین اون رو به صورت دستی اضافه کنین . کافیه این کد رو به هدر خودتون اضافه کنین :

<link href="css/style.css" rel="stylesheet">

پاسخ دهید

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