Popover dengan Ionic

SALAM ceria buat semua pembaca budiman. Kita bertemu kembali dalam ruangan Genius Corner minggu ini, bersama latihan Ionic bahagian lapan.

Menerusi latihan kali ini, kita akan membina aplikasi ringkas yang memaparkan tetingkap kecil Popover.

Popover merupakan tetingkap Dialog yang muncul paling atas berbanding semua paparan lain dalam aplikasi anda. Tetingkap ini digunakan sebagai alternatif kepada menu sisi sekiranya ruang yang ada tidak lagi mencukupi.

Sebagai contoh, anda mempunyai paparan Google Map, tetapi menu yang sepatutnya disediakan di dalam paparan ini seperti Directions tidak perlu ada dalam paparan lain seperti laman utama atau borang pendaftaran. Bagi tujuan khusus seperti ini, Popover merupakan pilihan yang paling bijak.

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

Semakan

Dalam latihan kali ini, kita telah memanggil tetingkap Dialog dari jenis Popover bagi memaparkan item menu yang khusus untuk laman tertentu. 

Apabila elemen ditekan, kelas popover.show() dipanggil untuk memaparkan kandungan yang tertulis dalam laman popover.html.

Apabila pengguna telah selesai dengan menekan ruang lain di luar skop Popover, kelas popover.hide () digunakan untuk menghilangkan Popover dari pandangan, dan seterusnya dipadam dari memori kekal (RAM) menggunakan arahan popover.remove().

Soalan

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

1. Ubah suai warna latar Popover menggunakan home.scss

2. Paparkan imej di dalam Popover

3. Gunakan elemen

untuk memaparkan senarai dalam Popover.

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 sama minggu hadapan.
Selamat mencuba!