Skip to main content
pengenalan component card Ionic

Pengenalan Component Card Pada Framework Ionic

Pendahuluan Pengenalan Component Card Pada Framework Ionic

Salam sejahtera, masih seputar pembelajaran tentang penggunaan Ionic Framework untuk pengembangan aplikasi mobile, kali ini kita akan bahas tentang Pengenalan Component Card Pada Framework Ionic. Ada beberapa materi pembahasan sebelumnya tentang awal menggunakan Framework Ionic, mulai dari instalasi awal, pembuatan project dan menjalankan project melalui serve sampai pada tahap pengenalan component CSS. Pembahasan tersebut mudah-mudahan menjadi landasan awal untuk lanjut ketahap ini. Pembahasan tentang pengenalan Struktur code project ionic ini sangat penting untuk pemahaman untuk pengembangan project ionic.

Baca : Pengenalan Component CSS Ionic

Topik pembahasan Pengenalan Component Card Pada Framework Ionic:

  1. Pendahuluan
  2. Card Header dan Footer
  3. Card List
  4. Card Images
  5. Card Showcase
  6. Kesimpulan dan Source Code

Source Code pembahasan Dowload : Via Dropbox

Pengenalan Component Card Pada Framework Ionic

Card merupakan salah satu komponen pada Ionic yang sering digunakan pada beberapa aplikasi populer. Kita dapat menggunakannya untuk mengorganisasikan informasi tertentu. Dengan banyak konten yang ingin ditampilkan dan juga layar yang relatif kecil pada perangkat Smartphone, Componen Card telah banyak digunakan oleh banyak perusahaan ternama dalam layout aplikasinya, misal Facebook, Google, Twitter, etc.

Selanjutnya untuk pemahaman dan Pengenalan Component Card Pada Framework Ionic. Pada layar perangkat Smartphone, card memudahkan untuk menampilkan informasi yang sama secara visual pada berbagai ukuran layar. Fleksibel dan bahkan dapat ditambahkan animasi. Card biasanya ditampilkan secara menumpuk atau bisa juga digunakan satu Halaman penuh dan dapat di-Swipe ke kiri dan kanan. Berikut Contoh Component Card:

pengenalan component card Ionic
pengenalan component card

Untuk Pengenalan Component Card Pada Framework Ionic, cara untuk membuat Card sangat mudah denga menggunaka kode awal yaitu sebagai berikut:

    
<ion-pane>
<div class="bar bar-header">
<h1 class="title">cards</h1>
	 </div>
	 <ion-content class="content has-header">
<div class="card">
<div class="item item-text-wrap"> Ini contoh Card Sederhana Ionic Yang dibuat untuk Belajar Component Card Oleh Ridwan, S.ST</div>
	 </div>
	 </ion-content>
    </ion-pane>

Jika kita jalankan kode tersebut akan menampilkan hasil sebagai berikut:

pengenalan component card Ionic
pengenalan component card

Untuk memulai penggunaan Componen Card, mulailah dengan membuat project baru Ionic, anda bisa gunakan perintah lewat command line ataupun membuat project dengan Ionic Lab, gunakan template Blank

Baca : Cara Buat Project Ionic

1.2. Card Header dan Footer

Card dapat pula digunakan secara custom, misalnya dapat memiliki header dan footer didalamnya. Cara untuk menambahkan nya yaitu tambahkan class “item-divider” di elemen card yang paling atas dan bawah. Berikut contoh Sederhana nya :

    <ion-pane>
<div class="bar bar-header">
<h1 class="title">Contoh Card Menggunakan Header dan Footer</h1>
	 </div>
	 <ion-content class="content has-header">
<div class="card">
<div class="item item-divider">HEADER CARD</div>
<div class="item item-text-wrap"> Ini contoh Card Sederhana Ionic Yang dibuat untuk Belajar Component Card Oleh Ridwan, S.ST</div>
<div class="item item-divider">FOOTER CARD</div>
	 </div>
	 </ion-content>
    </ion-pane>

Hasil Dari coding (run) project adalah sebagai berikut:

pengenalan component card Ionic
pengenalan component card

1.3. Card List

Gunakan list card untuk membuat card dengan tampila List, berikut contoh implementasi sederhana nya :

    <ion-pane>
<div class="bar bar-header">
<h1 class="title">Contoh Card List</h1>
	 </div>
	 <ion-content class="content has-header">
<div class="card list">
	 <a href="" class="item item-icon-left">
		<i class="icon ion-plus-circled"></i>Menu Utama
		</a>
	 <a href="" class="item item-icon-left">
		<i class="icon ion-gear-a"></i>Menu Kedua
		</a>
	 <a href="" class="item item-icon-left">
		<i class="icon ion-help-circled"></i>Menu Akhir
		</a>
	 </div>
	 </ion-content>
    </ion-pane>

Hasil dari coding tersebut adalah sebagai berikut:

pengenalan component card ionic
List pengenalan component card

Tampilan seperti gambar tersebut cocok jika kita gunakan untuk membuat menu yang bisa di klik oleh pengguna.

1.4. Card Images

Gambar akan terlihat lebih menarik dalam elemen card dan dapat juga dikombinasikan dengan list dan elemen lainnya. Contoh implementasinya:

<ion-pane>
<div class="bar bar-header">
<h1 class="title">Contoh Card Images</h1>
	 </div>
	 <ion-content class="content has-header">
<div class="card list">
	 <a class="item item-avatar" href="">
	 <img src="img/icon.jpg">
<h2>RIDWAN, S.ST</h2>
Happy Messi, Suarez and Neymar
</a>
<div class="item item-image"><img src="img/barca.jpg"></div>
	 <a class="item item-icon-left" href="">
	 <i class="icon ion-compose"></i>Send Mail</a>
	 </div>
	 </ion-content>
    </ion-pane>

Hasil run project coding tersebut:

pengenalan component card Ionic
pengenalan component card

Tampilan cantik tersebut biasanya kita dapatkan pada aplikasi Instagram, Flickr dan lain sebagainya.

1.5. Card Showcase

Berikut adalah bagaimana component Card dikombinasikan dengan beberapa elemen yang lain. DImulai dari List card, kemudian item-avatar untuk list item, elemen item-body untuk gambar teks dan footer dengan class item-divider. Berikut contoh Scriptnya dan hasil run project:

    <ion-pane>
<div class="bar bar-header">
<h1 class="title">Contoh Card</h1>
	 </div>
	 <ion-content>
<div class="content has-header">
<div class="list card">
<div class="item item-avatar">
	 <img src="img/icon.jpg">
<h2>RIDWAN, S.ST</h2>
5 jam lalu
	 </div>
<div class="item item-body">
	 <img class="full-image" src="img/barca.jpg">
Happy Show Messi, Suarez dan Neymar
	 <a href="" class="subdued">3 Like</a>
	 <a href="" class="subdued">3 Comments</a>
	
	 </div>
<div class="item tabs tabs-secondary tabs-icon-left">
	 <a class="tab-item" href="">
		<i class="icon ion-thumbsup"></i>Like</a>
		<a class="tab-item" href="">
		<i class="icon ion-chatbox"></i>Comment</a>
		<a class="tab-item" href="">
		<i class="icon ion-share"></i>Share</a>	
</div>
	 </div>
	 </ion-content>
    </ion-pane>

Hasil run projectnya :

pengenalan component card pada Ionic
pengenalan component card Sederhana

Kesimpulan Pengenalan Component Card Pada Framework Ionic

  1. Card merupakan salah satu Componen Ionic untuk membuat tampilan aplikasi sehingga akan tampak lebih menarik
  2. Kita bisa men-Custom Card sesuai kebutuhan aplikasi yang akan kita bangun
  3. Gunakan Component Card jika kita ingin tampilan aplikasi mobile lebih menarik pengguna.
Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com