ionic mengguankan sass sebagai prepartor dari css. Penggunaa sass ini sangat membantu dalam membuat stylesheet. Contoh sederhannya penggunaan variabel untuk menyimpan warna primary, secondary, danger, light. Selanjutnya bagaimana melakukan themeing terhadap aplikasi ionic kita? simak ulasan ini.
berbicara mengenai styling / theming terhadap ionic kita tidak dapat lepas dari css karena memang ionic adalah framework hybrid yang basisnya adalah suatu website. Semua yang dapat kita lakukan pada css secara teori dapat di implementasikan pada ionic. Namun secara prakteknya , memang belum tentu semua dapat dilakukan mengingat ionic juga memliki built in “css” pada komponen-komponennya.
Dasar-dasar styling pada ionic ini bertujuan agar kita dapat mengatur peletakan elemen-elemen yang ada pada aplikasi kita sehingga dapat memperindah UI(user interfaces). Ulasan ini akan membahas dasar-dasar styling pada ionic meliputi :
- Manajemen lokasi text, misalnya ingin meletakan text di tengah
- Margin dan padding suatu elemen
- Peletakan elemen (misalnya diletakan pada bagian kanan aplikasi atau di kiri / floating)
Untuk bagian SASS tidak dijelaskan disini namun kami memiliki satu ulasan mengenai dasar-dasar dari sass yang bisa anda terapkan pada ionic.
SASS Part 1 dari 2 – Installasi, Variabel, Nesting, Partial & Import (superset css)
1.Text
1.1 Letak text
text menjadi salah satu komponen penting dalam ionic. Kita dapat meletakan text dengan alignment left, center, justify ataupun middle. Pada css biasannya kita akan menuliskannya dengan menggunakan “text-align” : “center”. Namun, ionic memberikan kemudahan dengan menggunakan suatu directive. Berikut ini adalah beberapa daftar directive yang dapat digunakan untuk mengatur posisi dari suatu text pada ionic
| nama directive | fungsi |
| text-left | mengatur agar posisi text berada pada kiri |
| text-right | mengatur agar posisi text berada pada kanan |
| text-wrap | melakukan wrapping pada text jika melebihi panjang suatu elemen |
| text-middle | mengatur agar posisi text berada dikiri |
contoh implmentasi directive diatas adalah
<ion-list> <ion-item> <p text-left>Degananda ferdian</p> </ion-item> <ion-item> <p text-right>Degananda ferdian</p> </ion-item> </ion-list>
kode diatas akan menghasilkan tampilan sebagai berikut ini
1.2 Transformasi text
text yang kita tulis dapat ditransformasikan menjadi huruf besar untuk semua karakter dan bahkan hanya huruf depan yang besar sisannya adalah huruf kecil. Ionic juga menyediakan directive untuk melakukan transformasi text sehingga kita dapat dengan mudah menggunakannya. Namun, kita tahu bahwa ionic menggunakan angular maka transformasi text juga dapat dilakukan melalui pipe. berikut ini adalah beberapa directive untuk melakukan transformasi text
| nama directive | fungsi |
| text-uppercase | mengubah karakter menjadi uppercase (seluruh karakter) |
| text-lowercase | mengubah karakter menjadi lower case (seluruh karakter) |
| text-capitalize | mengubah karaktekr menjadi Captical (hanya huruf besar yang kapital). |
contoh implmentasi directive diatas adalah
<ion-list> <ion-item> <p text-left text-uppercase>degananda ferdian</p> </ion-item> <ion-item> <p text-right text-capitalize>degananda ferdian</p> </ion-item> </ion-list>
kode diatas akan menghasilkan tampilan sebagai berikut ini
2. Letak elemen , margin & padding
Elemen adalah suatu unit terkecil dari sebuah komponen yang dapat berupa text, ion-card, ion-item , <p> (paragrapah) dan lain sebagainnya. Tentunnya kita sering kali mengatur posisi dari elemen agar mencapai posisi yang di inginkan. Posisi ini dapat berupa margin , padding ataukah letak (alignment/float) elemen tersebut pada aplikasi.
2.1 Floating elemen
Untuk memberikan float pada elemen ionic menyediakan directive yang dapat digunakan. Tentunnya hal ini sangat membantu para programmer untuk mengatur posisi dari elemen. Berikut ini adalah beberapa daftar directive untuk mengatur float
| nama directive | fungsi |
| float-left | meletakan elemen pada bagian kiri |
| float-right | meletakan elemen pada bagian kanan |
2.2 Margin & padding
Menurut pengalaman pribadi kami, margin dan padding adalah css utilities yang paling sering digunakan dalam konteks positioning dari suatu elemen. Hal ini dikarenakan tidak adannya patokan resmi jarak yang harus dimiliki antar elemen maupun jarak elemen ke layar. Contohnya saja ada website dengan panjang 80% dari layar , 90% dan bahkan ada yang 100% full pada layar. hal ini menunjukan tidak ada standar design. Sehingga pengaturan margin dan padding pun juga demikian.
Kontradiksi / berlawan dengan statement kami diatas bahwa jarak elemen tidak terstandar pada ionic padding dan margin telah distandarkan oleh IONIC. Standar tersebut telah dipikirkan untuk mendekatkan look and feel aplikasi ionic dengan aplikasi native android/ionic meski tidak akan pernah sama (look and feelnya). Namun kita tetap dapat mengubahnya melalui file variable.scss(tidak baku). Ionic menyediakan directive untuk melakukan padding dan margin. Pastikan ketika kita ingin memberikan jarak pada suatu elemen menggunakan directive dari ionic. Sangat tidak disarankan melakukannya melalui css / stylesheet.
| nama directive | fungsi |
| padding | memberikan padding (kanan, kiri, atas , bawah) sebesar 16px |
| padding-left / right / top / bottom | memberikan padding sesuai directive |
| no-padding | tidak memberikan padding |
contoh implmentasi directive diatas adalah
<ion-list> <ion-item padding> <p text-left text-uppercase>degananda ferdian</p> </ion-item> <ion-item padding-right> <p text-right text-capitalize>degananda ferdian</p> </ion-item> </ion-list>
kode diatas akan menghasilkan tampilan sebagai berikut ini