آموزش رنگ ها در برنامه نویسی آیونیک
آموزش رنگ ها در برنامه نویسی آیونیک
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش رنگ ها در برنامه نویسی آیونیک خواهیم پرداخت.
قبل از اینکه با عناصر واقعی موجود در فریم ورک آیونیک شروع کنیم، بگذارید کمی درک کنیم که چگونه آیونیک از رنگ برای عناصر مختلف استفاده می کند.
کلاسهای رنگ آیونیک
فریم ورک آیونیک مجموعه ای از نه کلاس رنگ از پیش تعریف شده را به ما می دهد. می توانید از این رنگ ها استفاده کنید یا می توانید با استایل خود آن را نادیده بگیرید.
جدول زیر مجموعه 9 رنگ پیش فرض ارائه شده توسط آیونیک را نشان می دهد. ما در این آموزش از این رنگ ها برای سبک دهی به عناصر مختلف یونی استفاده خواهیم کرد. در حال حاضر، می توانید تمام رنگ ها را مانند تصویر زیر بررسی کنید –
| کلاس | توضیحات | |
|---|---|---|
| light | برای رنگ سفید استفاده شود | |
| stable | برای رنگ خاکستری استفاده شود | |
| positive | برای رنگ آبی استفاده شود | |
| calm | برای رنگ آبی روشن استفاده شود | |
| balanced | برای رنگ سبز استفاده شود | |
| energized | برای رنگ زرداستفاده شود | |
| assertive | برای رنگ قرمز استفاده شود | |
| royal | برای رنگ بنفش استفاده شود | |
| dark | برای رنگ سیاه استفاده شود |
استفاده از رنگ در برنامه نویسی آیونیک
آیونیک از کلاسهای مختلف برای هر عنصر استفاده می کند. به عنوان مثال ، یک عنصر هدر کلاس نوار و یک دکمه کلاس دکمه دارد. برای ساده کردن استفاده ، از رنگهای مختلف با پیشوند کلاس عنصر در یک نام رنگ استفاده می کنیم.
به عنوان مثال، برای ایجاد یک هدر رنگی آبی، از bar-calm در زیر استفاده خواهیم کرد –
|
1 2 3 |
<div class = "bar bar-header bar-calm"> ... </div> |
به همین ترتیب، برای ایجاد یک دکمه رنگ خاکستری، از کلاس button-stable به شرح زیر استفاده خواهیم کرد.
|
1 2 3 |
<div class = "button button-կայուն"> ... </div> |
همچنین می توانید مانند هر کلاس CSS از کلاس رنگ آیونیک استفاده کنید. اکنون دو پاراگراف را با رنگی متعادل (سبز) و پرانرژی (زرد) استایل دهی می کنیم.
|
1 2 |
<p class = "balanced">Paragraph 1...</p> <p class = "energized">Paragraph 2...</p> |
کد فوق صفحه زیر را تولید می کند –
سفارشی سازی رنگ ها با CSS
هنگامی که می خواهید برخی از رنگ های پیش فرض Ionic را با استفاده از CSS تغییر دهید ، می توانید این کار را با ویرایش فایل lib / css / ionic.css انجام دهید. در بعضی موارد، این روش چندان مثمر ثمر نیست زیرا هر عنصر (هدر ، دکمه ، پاورقی …) از کلاسهای خاص خود برای یک ظاهر طراحی شده استفاده می کند.
بنابراین اگر می خواهید رنگ کلاس “light” را به نارنجی تغییر دهید، باید تمام عناصر استفاده کننده از این کلاس را جستجو کرده و آن را تغییر دهید. این مورد زمانی مفید است که می خواهید رنگ یک عنصر را تغییر دهید ، اما برای تغییر رنگ همه عناصر بسیار کاربردی نیست زیرا این امر باعث صرف زمان زیاد می شود.
سفارشی سازی رنگ ها با استفاده از SASS
SASS (که فرم کوتاه آن است – از لحاظ نوشتاری بسیار جذاب است) روش ساده تری برای تغییر رنگ همه عناصر در یک زمان فراهم می کند. اگر می خواهید از SASS استفاده کنید ، پروژه خود را در پنجره دستور باز کرده و تایپ کنید –
|
1 |
C: \ Users \ Username \ Desktop \ tutorialApp> ionic setup sass |
با این کار SASS برای پروژه شما راه اندازی می شود. اکنون می توانید با باز کردن پرونده scss / ionic.app.scss و سپس تایپ کد زیر قبل از این خط، رنگ های پیش فرض را تغییر دهید.
ما رنگ متعادل را به آبی تیره و رنگ را به نارنجی تغییر خواهیم داد. دو پاراگرافی که در بالا استفاده کردیم اکنون آبی تیره و نارنجی هستند.
|
1 2 |
$balanced: #000066 !default; $energized: #FFA500 !default; |
اگر از مثال زیر استفاده می کنید –
|
1 2 |
<p class = "balanced">Paragraph 1...</p> <p class = "energized">Paragraph 2...</p> |
کد فوق صفحه زیر را تولید می کند –
https://www.tutorialspoint.com/ionic/ionic_colors.htmhttps://www.tutorialspoint.com/ionic/ionic_colors.htm
تمام عناصر یونی که از این کلاسها استفاده می کنند به آبی تیره و نارنجی تغییر می کنند. توجه داشته باشید که نیازی به استفاده از کلاسهای رنگ پیش فرض Ionic نیست. شما همیشه می توانید عناصر را همانطور که می خواهید سبک دهید.
نکته مهم
پس از نصب SASS ، فایل www / css / style.css از عنوان index.html حذف می شود. اگر هنوز می خواهید از آن استفاده کنید، باید آن را به صورت دستی پیوند دهید. index.html را باز کرده و سپس کد زیر را در سرصفحه اضافه کنید.
|
1 |
<link href = "css/style.css" rel = "stylesheet"> |
لیست جلسات قبل آموزش برنامه نویسی آیونیک
.svg)
دیدگاه شما