Komponen Card Pada Ionic – berjumpa kemabali tutorial ionic, pada artikel kali ini saya akan membahas Komponen Card Pada Ionic. komponen card (dalam bahasa indonesia kartu) ini sangat efektif diterapkan dalam aplikasi yang kita buat karena tampilan yang menarik dan ramah bagi pengguna aplikasi yang kita buat.
ada beberapa komponen yang bisa kita gunakan untuk menampilkan data pada aplikasi mobile seperti list, dan card (yang sedang kita bahas). salah satu aplikasi popular yang menggunakan komponen card ini seperti BBM, Facebook, dan lain-lain
Komponen Card Pada Ionic
Komponen Card Pada Ionic
oke, langsung menju tkp. dalam projek ionic ini saya menggunakan template blank (jika belum paham cara membuat projek ionic silahkan baca disini). buka file index.html (file ini tergantung dimana kita akan menggunakan komponen kard). tambahkan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
<ion-card>
<ion-item class="item-divider">
Judul post
</ion-item>
<ion-item class="item-text-wraper">
deskripsi
</ion-item>
<ion-item class="item-divider">
footer
</ion-item>
</ion-card>
atau bisa juga dengan memanggil classnya, contohnya :
1
2
3
4
5
<div class="card">
<div class="item item-divider">Judul Post</div>
<div class="item item-text-wraper">deskrisp</div>
<div class="item item-divider">footer</div>
</div>
maka tampilan yang dihasilkan sebagai berikut :
Komponen Card Pada Ionic
Komponen Card List Pada Ionic
komponen card list digunakan untuk menampilkan data dalam bentuk card dan list, untuk contohnya perhatikan kode berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ion-content class="padding has-header">
<!--komponen card-->
<div class="list card">
<aclass="item item-avatar">
<img src="img/gb1.jpg">
Saya
</a>
<aclass="item item-icon-left">
<iclass="icon ion-social-android-outline"></i>
Phone
</a>
<aclass="item item-icon-left">
<iclass="icon ion-social-googleplus-outline"></i>
Google Plus
</a>
</div>
</ion-content>
Komponen Card List
Komponen Card dan Gambar Pada Ionic
berikut contoh tampilan yang menggunakan komponen card beserta gambar :
Tutorial Ionic Part 11 : Icon Pada Ionic -oke, kita lanjutkan pembahasan tutorial ini, sesuai judulnya pada artikel kali ini akan kita bahas mengenai icon ...
Tutorial Ionic Part 10 : Checkbox pada Ionic – kita lanjutkan pembahasan artikel sebelumnya penggunaan warna pada ionic, pada artikel kali ini kita akan membahas ...
Penggunaan Warna Pada Ionic – kita lanjutkan pembahasan artikel yang kemarin tentang membuat navigasi tab pada ionic. pada artikel ini kita akan membahas penggunaan warna ...
Tutorial Ionic Part 8 : Pengenalan Komponen Tabs Pada Ionic – hallo sahabat malasngoding. terima kasih sudah kembali sduah berkunjung ke malasngoding.com sesuai dengan judulnya, ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.