Action Sheet menggelongsor dari sisi bawah paparan peranti mudah alih, lalu memaparkan sekumpulan pilihan berserta kebolehan membatalkan atau melaksanakan arahan yang dipilih. Action Sheet juga biasanya digunakan sebagai alternatif kepada menu. Namun, ia tidak sepatutnya digunakan sebagai ganti kepada navigasi.

Action Sheet sentiasa muncul paling atas berbanding semua komponen lain dalam papan, dan perlu disisih keluar jika pengguna ingin berinteraksi dengan elemen lain paparan.

Apabila diaktifkan, keseluruhan paparan digelapkan bagi memberi fokus kepada Action Sheet yang muncul.

Tidak seperti latihan terdahulu, latihan Ionic kali ini memperkenal kod atur cara JavaScript atau Text Script kepada para pembaca berbanding elemen HTML sahaja.

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

 

 

 

 

Soalan

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

1. Ubah suai warna teks paparan melalui fail CSS

2. Tambah satu item baru di dalam menu Action Sheet

3. Ubah teks paparan console.log () kepada teks pilihan anda

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!

Semakan

Dalam latihan kali ini, kita mengikat fail TextScript home.ts kepada fail paparan utama home.html melalui arahan template Url di dalam kod atur cara fail home.ts.

Menerusi latihan ini, kita dapati kod atur cara Text Script hanya ditulis di dalam fail .ts sahaja, manakala kod atur cara HTML hanya ditulis di dalam fail .html sahaja.

Perkara pertama yang kita lakukan ialah memanggil Library Angular ke dalam fail Text Script.

Apabila fungsi open Menu() dipanggil melalui butang HTML, elemen actionsheet Ctrl diaktifkan melalui objek Action Sheet.

Menerusi konsep inheritance, pengatur cara mampu menjimatkan masa dengan memanggil pelbagai fungsi terbina dalam Action Sheet yang telah disediakan kerangka Ionic.