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

ionic – ionic ui component : list, list-divider, button, icon, card, grid

0
Degananda.com -

Komponen pada ionic merupakan hal yang terpenting. Contohnya adalah card sangat berguna untuk menampilkan informasi dalam bentuk list. Namun tidak hanya card yang terdapat pada ionic masih banyak sekali komponen lain. Silahkan simak ulasan ini untuk mengetahui daftar komponen-komponen yang ada pada ionic.

Ionic memiliki banyak sekali komponen yang dapat kita gunakan dalam membangun aplikasi android maupun iOS. Pada ulasan ini akan dibahas beberapa jenis-jenis komponen yang dapat kita gunakan pada ionic kecuali komponen yang berhubungkan  dengan form. Komponen form akan dibahas terpisah dari ulasan ini karena akan disertai cara menghandle form tersebut. Berikut ini adalah komponen-komponen dasar yang ada pada ionic

  1. List
  2. List divider
  3. Button
  4. Ionic icons
  5. Cards
  6. Grids
  7. Ionic dateTime
  8. Toggle
  9. Badges
  10. Alerts
  11. Toasts

ulasan ini akan membahas penggunaan sebelas komponen diatas disertai dengan implmentasinnya pada coding. Komponen-komponen diatas merupakan directive dari ionic. Jika pada angular kita hanya dapat menggunakan komponen tersebut dari beberapa framework css seperti materialize-css , angular material design , bootstrap namun juga tidak menutup kemungkinan untuk membuatnya sendiri (tentunnya membutuhkan waktu dalam pembuatannya, IMO, which is not good jika untuk suatu project).

Setiap komponen pada ionic adalah unik dimana masing-masing dari komponen tersebut memiliki fungsi penggunaanya. Jika kita salah menggunakan suatu komponen untuk fungsi tertentu maka ui  dan ux dari aplikasi akan menjadi buruk. Contoh sederhana adalah penggunaan list dan grid. Tentunnya jika kita ingin menampilkan data yang membutuhkan space lebar maka pilihan akan jatuh pada list , jika menggunakan grid untuk data yang membutuhkan space lebar maka tampilan akan menjadi tidak proposional.

Komponen-komponen pada ionic tidak hanya berada dalam bagian view / html namun beberapa ada juga yang memanfaatkan typescript. Contohnya seperti komponen tabs membutuhkan input data yang berasal dari class. Sehingga kita harus aware bahwa komponen-komponen tersebut hanya dapat berjalan jika data yang diberikan adalah cukup. Ketika komponen tidak muncul maka salah satu kemungkinannya adalah kita lupa untuk menghandle bagian data yang berhubungan dengan komponen itu.

komponen basic @ ionic

1. Ionic list

1.1 Basic list

Komponen list digunakan untuk menampilkan suatu data yang ditampilkan secara vertikal kebawah (list). Contohnya adalah daftar kontak (contact list) , playlist music / video dan lain sebagainya. Jika anda pernah menggunakan facebook timeline yang berisi posting dari teman-teman anda akan ditampilkan dalam bentuk list.

Misalnya kita memiliki suatu list buah yang digambarkan dengan suatu array seperti terlihat dibawah ini.

buah : Array<string> = ['apel', 'mangga', 'tomat'];

Maka kode basic untuk menampilkan list(daftar buah) pada ionic adalah sebagai berikut ini

<ion-list>
  <ion-item *ngFor="let buahItem of buah">
    {{buahItem}}
  </ion-item>
</ion-list>

<ion-list> berfungsi sebagai container. Kemudian setiap item didalamnya dapat kita tulis dalam <ion-item>. Namun, ion-item hanya digunakan untuk menampilkan list item. Jika kita menginginkan setiap list-item berupa button maka kita dapat menggunakan ion-item sebagai directive. Contohnya data diatas kita ingin tampilkan sebagai button maka kodennya menjadi seperti berikut ini

<ion-list>
  <button ion-item *ngFor="let buahItem of buah">
    {{buahItem}}
  </button>
</ion-list>

kode diatas akan menghasilkan tampilan berupa :

jika tidak menginginkan line pada setiap ion-item maka kita dapat tambahkan directive no-lines pada ion-list.

<ion-list no-lines>
  <button ion-item *ngFor="let buahItem of buah">
    {{buahItem}}
  </button>
</ion-list>

Secara default ion-list tidak memiliki margin. jika ingin memberikan margin kita dapat menambahkan directive inset.

<ion-list inset>
  <button ion-item *ngFor="let buahItem of buah">
    {{buahItem}}
  </button>
</ion-list>

maka akan menghasilkan tampilan seperti dibawah ini (list akan lebih menjorok kedalam).

2. List dividers

list dividers adalah komponen yang digunakan untuk membagi suatu list. Misalnya kita memiliki daftar sayuran dan buah. Kita ingin menampilkannya dengan membaginnya dan ditampilkan berdasarkan label / kategorinnya. Label buah dan label sayuran

buah : Array<string> = ['apel', 'mangga', 'pisang'];
sayur : Array<string> = ['kubis', 'kentang', 'wortel'];

maka untuk mengakomodasi kasus diatas kita tidak lagi menggunakan <ion-list> melainkan menggunakan kompnen <item-item-group>. Untuk labelnya kita menggunakan <ion-item-divider> dan untuk item pada masing-masing label / divider tetap menggunakan <ion-item>. Berikut adalah contoh implmenetnasi untuk kasus sayur dan buah. Untuk divider pastikan menggunakan directive color untuk membedakan antara item yang berfungsi sebagai divider dan item non divider.

<ion-item-group>
  <ion-item-divider color="light">
    Buah
  </ion-item-divider>
  <ion-item  *ngFor="let buahItem of buah">
    {{buahItem}}
  </ion-item>
</ion-item-group>

kode diatas akan menghasilkan tampilan seperti dibawah ini.

3. Buttons

Button atau dalam bahasa indonesia berarti tombol. Komponen ini sering digunakan pada suatu form ataupun ketika akan mengeksekusi fungsi dengan user event click (biasannya, tergantung pada kondisi). Pada ionic terdapat berbagai macam tombol. Perbedannya terletak pada tampilan atau view dari tombol tersebut namun secara fungsi tetap sama sebagai suatu tombol

Cara membuat tombol pada ionic adalah

<button ion-button> klik saya kakak </button>

3.1 Styling pada tombol

tombol-tombol pada ionic terdapat beragam jenis untuk memenuhi kebutuhan kita dalam merancang user interfaces yang sesuai dengan design yang kita.

3.1.1 Warna

untuk memberikan warna pada button kita harus menambahkan directive “color” pada button tersebut. Sementara daftar property “warna” dapat kita dapatkan di file variables.scss (sass) pada variabel $colors. Contohnya kita akan berikan warna pada tombol dengan warna secondary serta tombol dengan warna danger.

<button ion-button color="secondary"> klik saya kakak </button>
<button ion-button color="danger"> klik saya kakak </button>

kode diatas akan menghasilkan tampilan dibawah ini

3.1.2 button style

terdapat tiga jenis button style yakni :

  1. basic
  2. outline , terdapat border pada bagian luar dari button
  3. clear , clear a.k.a tanpa border pada bagian luar dan background

Ketiga jenis buttont tersebut dapat dibuah dengan cara menambahkan directive basic/outline/clear pada komponen button untuk lebih jelasnya perhatikan kode dibawah ini untuk melihat perbedaan tiga tombol tersebut.

<button ion-button color="secondary"> klik saya kakak </button>
<button ion-button color="danger" outline> klik saya kakak </button>
<button ion-button color="primary" clear> klik saya kakak </button>

kode diatas akan menghasilkan tampilan sebagai berikut ini

 

4. Ionicons

icon pada aplikasi sangat penting agar user mudah mengetahui makna dari suatu fungsi. Ionic memiliki iconnya sendiri dan terdapat lebih dari 700 icon yang siap digunakan. Daftar ikon tersebut dapat anda akses di :

http://ionicframework.com/docs/ionicons/

cara menggunakna icon tersebut adalah dengan menggunakan komponen <ion-icon> , kemudian berikan attribute “name” dan memberikan property sesuai nama icon pada link diatas

<ion-icon name="heart"></ion-icon>

kode diatas akan menghasilkan tampilan seperti dibawah ini

kita dapat memberikan icon ini pada berbagai komponen lainnya, contohnya misalnya tombol kita ingin diberikan icon maka contoh implementasinnya adalah sebagai berikut ini

<button ion-button color="secondary">
  <ion-icon name="heart"></ion-icon>
  &nbsp; klik saya kakak 
</button>

kode diatas akan menghasilkan tampilan sebagai berikut ini

 

5. Cards

Card adalah komponen yang sangat berguna untuk menampilkan suatu konten karena card dapat mengakomodasi konten yang banyak (tulisan maupun ragam element). Komponen card ditulis dengan <ion-card>. Komponen ini memiliki banyak sekali “konten” yang dapat di akomodasi antara lain adalah :

  • card header
    header berfungsi sebagai outline dari konten yang ditampilkan pada card. Contohnya pada timeline facebook maka header adalah profile picture , nama dari user serta tanggal posting.
  • card content
  • card list
    digunakan untuk menampilkan card dalam bentuk list
  • card images

Implementasi card secara basic

<ion-card>
  <ion-card-header>degananda ferdian priyambada</ion-card-header>
  <ion-card-content>
  Aku adalah seorang kapiten. Mempunyai pedang panjang. Kalau berjalan .... prok .. prok .. prok
  </ion-card-content>
</ion-card>

kode diatas akan menghasilkan tampilan sebagai berikut ini

Card list

kita dapat menaruh konten yang berupa list pada card dengan menggunakan <ion-list> sebagai mana telah kita bahas pada bagian 1. Misalnya pada kasus menampilkan daftar buah maka implementasi kodennya adalah sebagai berikut ini

<ion-card>
  <ion-card-header>Daftar buah</ion-card-header>
  <ion-list>
    <ion-item *ngFor="let buahItem of buah">
        <ion-icon name="heart"></ion-icon>
        &nbsp; {{buahItem}}
    </ion-item>
  </ion-list>
</ion-card>

kode diatas akan menghasilkan tampilan sebagai berikut ini

6. Grids

grid adalah komponen “layout” yang dibangun berdasarkan flex box yang biasannya (pada web) digunakan untuk menampilkan konten dengan beberapa jumlah kolom tertentu dan diatur dengan sedemikian rupa agar dapat menjadi responsive pada berbagai devices. Pada ionic grid digunakan untuk menampilkan content dengan jumlah kolom yang kita inginkan.

komponen grid dilambangkan denan <ion-grid> didalamnya terdapat dua konten yakni <ion-row> untuk membuat row serta <ion-col> untuk membuat kolom. Berikut ini adalah contoh basic penggunaan grid pada ionic contohnya kita akan membuat grid 2×2.

<ion-grid>
  <ion-row>
    <ion-col col-l6>1</ion-col>
    <ion-col col-l6>2</ion-col>
  </ion-row>
  <ion-row>
    <ion-col col-l6>3</ion-col>
    <ion-col col-l6>4</ion-col>
  </ion-row>
</ion-grid>

kode diatas akan memberikan tampilan sebagai berikut ini

secara mudahnya panjang kolom maksimal adalah “12” atau col 12. Kita dapat membagi kolom asalkan jika dijumlahkan (dalam satu row) adalah dua belas.