lifelong learner — urip iku urup, currently working on accenture.

ionic css – manajemen text & elemen

0
Degananda.com -

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 :

  1. Manajemen lokasi text, misalnya ingin meletakan text di tengah
  2. Margin dan padding suatu elemen
  3. 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