Bermain Color Ionic Framework

Bermain Color ionic Framework. Desain dalam sebuah aplikasi sangatlah mempengaruhi kepada psikologis User. Untuk dapat memberikan kesan maksimal kepada user diperlukan paduan warna yang sesuai dengan aplikasi kita.

Berikut beberapa class warna yang diberikan ionic framework:

Ionic Color Classes

Class	Description	Result
light	Warna Putih
stable	Warna Abu-abu
positive	Wana Biru
calm	Warna Biru Cerah
balanced	Warna Hijau
energized	Warna Kuning
assertive	Warna Merah
royal	Warna Ungu
dark	Warna Hitam

Penggunaaan

Dalam penggunaanyapun sangatlah mudah. Berikut contoh penggunaannya:

Penggunaan dalam bar

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

Penggunaan dalam button

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

dapat juga digunakan dalam paragraf, misal

<p class="balanced">Paragraph 1...</p>
<p class="energized">Paragraph 2...</p>

Berikut sample dari penerapan color:

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2 class="balanced">Welcome to Ionic</h2>
    <p class="calm">
    This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
    </p>
    <p class="assertive">
      To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
    </p>
    <p class="royal">
    If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
    </p>
    <p class="energized">
      For help sending push notifications, join the <a href="https://apps.ionic.io/signup" target="_blank">Ionic Platform</a> and check out <a href="http://docs.ionic.io/docs/push-overview" target="_blank">Ionic Push</a>. We also have other services available.
    </p>
  </ion-content>
</ion-view>

Hasilnya:

Keren bukan? Ya kira-kira begitulah dalam penerapan warna. Semoga dapat membantu dalam pembelajaran ionic Anda.