Dalam pengembangan aplikasi mobile, tampilan yang interaktif dan responsif sangat penting untuk meningkatkan pengalaman user. Salah satu komponen yang dapat membantu mencapai tujuan tersebut adalah Ionic Floating Action Button (FAB). FAB adalah tombol aksi yang terbangun dengan cara yang unik, memiliki fungsi sebagai tombol utama dalam aplikasi.
Sifat-sifat FAB
- Posisi Tetap: FAB dapat ditempatkan secara tetap di dalam halaman aplikasi menggunakan slot "fixed".
- Tombol Utama: FAB harus memiliki tombol aksi utama yang dapat dilakukan oleh pengguna.
- List Fab: FAB juga dapat memiliki list fab yang berisi tombol aksi terkait, yang akan muncul saat tombol aksi utama di-klik.
- Sisi: Property "side" pada komponen Fab List mengontrol tempat ia muncul relatif terhadap tombol aksi utama.
Mengatur FAB
- Tempat Tetap: Untuk menempatkan FAB secara tetap, Anda dapat menggunakan slot "fixed" di dalam halaman aplikasi.
- Arah Vertikal: Property "vertical" mengontrol posisi vertikal FAB di dalam viewport.
- Arah Horizontal: Property "horizontal" mengontrol posisi horizontal FAB di dalam viewport.
Safety Area
Jika tidak ada ion-header atau ion-footer, FAB mungkin tercover oleh notch, status bar, atau UI perangkat lainnya. Untuk mengatasi hal ini, Anda dapat menggunakan variabel –ion-safe-area-(dir).
Relative to Infinite List
Dalam skenario di mana suatu view berisi banyak elemen interaktif, seperti daftar yang tak terhingga, FAB mungkin sulit diakses oleh pengguna. Untuk mengatasi hal ini, Anda dapat menggunakan property "fixedSlotPlacement" pada Content dan settingnya menjadi "before", sehingga FAB akan ditempatkan sebelum konten utama di dalam DOM.
Warna
FAB juga memiliki opsi warna yang dapat diatur dengan cara yang unik. Anda dapat menggunakan CSS Custom Properties untuk mengubah warna FAB.
Label
Sebagai FAB hanya boleh berisi ikon, pengembang harus memberikan label aria pada setiap instance ion-fab-button. Tanpa label ini, teknologi assistive tidak akan dapat mengumumkan tujuan tombol aksi masing-masing.
Dengan demikian, Ionic Floating Action Button (FAB) adalah komponen yang sangat berguna dalam pengembangan aplikasi mobile, serta memberikan berbagai opsi untuk mengatur tampilan dan fungsi FAB.