Jika dibandingkan dengan komputer, paparan skrin telefon pintar adalah sangat terhad. Oleh itu, penggunaan elemen paparan berbentuk kad merupakan penyelesaian terbaik untuk mempersembahkan kandungan skrin aplikasi atau laman sesawang (web) kepada pengguna.

Secara default, penggunaan kelas ‘kad’ boleh dimasukkan ke dalam elemen HTML pilihan anda hanya dengan menambah kelas card. Antara fungsi yang paling berguna di dalam kelas ini ialah item-text-wrap yang membolehkan teks panjang disusun dengan cantik dalam kad paparan.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

Latihan

Langkah 1: Buka tetingkap DOS pada sistem pengoperasian Windows, dan Terminal pada sistem pengoperasian MacOS

Langkah 2: Taip arahan berikut pada tetingkap DOS/Terminal untuk bina projek Ionic anda di dalam folder Genius Corner yang disimpan di Desktop seperti projek terdahulu.

cd Desktop

cd Genius Corner

Langkah 3: Taip arahan berikut pada tetingkap DOS/Terminal untuk membina projek Ionic anda dengan nama myCard

ionic start myCard blank

Langkah 4: Taip arahan berikut untuk masuk ke dalam folder myCard

cd myCard

Langkah 5: Taipkan arahan berikut ke dalam tetingkap DOS/Terminal memapar dan mengubah suai aplikasi anda menggunakan developer console yang terdapat di dalam pelayar seswang (web)

ionic serve

Langkah 6: Buka fail home.html yang terdapat di dalam folder myList/src/pages/home dan taipkan arahan berikut sejurus selepas elemen pembuka <body> bagi menghasilkan elemen kad.

Langkah 7: Masukkan pula kod atur cara berikut bagi memaparkan elemen kad yang lengkap dengan ikon, teks dan imej.

SEMAKAN

Dalam kod atur cara pertama, elemen kad dipecahkan kepada tiga bahagian iaitu header, kandungan utama dan footer.Setiap bahagian ini diasingkan oleh kelas item item-divider. Bagi paparan teks panjang pula, kelas item item-text-wrap digunakan bagi memastikan teks disusun dengan cantik di dalam ruangan kad.

Dalam kod atur cara kedua pula, bahagian ikon ditetapkan dengan kelas item item-avatar, manakala bahagian kandungan utama pula ditetapkan dengan kelas item item-body. Bagi memaparkan imej yang akan memenuhi ruang tanpa mengira saiz skrin peranti, kelas full-image ditetapkan pada elemen <img>.

SOALAN

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

  1. Ubah imej ikon kepada imej pilihan anda.
  2. Hasilkan dua lagi kad lengkap
  3. Masukkan footer pada kesemua kad lengkap.

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin. Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!