Dalam pembangunan aplikasi berbasis web menggunakan Ionic, salah satu komponen yang paling penting adalah toolbar. Toolbar ini digunakan untuk menampilkan informasi dan aksi yang terkait dengan layar saat ini. Dalam artikel ini, kita akan membahas fitur-fitur dan cara mengcustomisasi toolbar di dalam aplikasi Ionic.

Shadow Toolbars

Toolbar biasanya ditempatkan di atas atau dibawah konten dan memberikan informasi dan aksi untuk layar saat ini. Ketika toolbar ditempatkan di dalam konten, ia akan bergerak bersama dengan konten. Toolbar dapat mengandung beberapa komponen, seperti judul, tombol, ikon, tombol kembali, tombol menu, inputan pencarian, segment, dan progress bar.

Mengcustomisasi Toolbar

Toolbar dapat ditempatkan di dalam header atau footer untuk pengaturan posisi yang tepat. Ketika toolbar ditempatkan di header, ia akan tampak tetap di atas konten. Ketika toolbar ditempatkan di footer, ia akan tampak tetap di bawah konten. Konten fullscreen akan bergerak di belakang toolbar di dalam header atau footer.

Button dan Ikon

Tombol yang ditempatkan di dalam toolbar harus ditempatkan di dalam komponen buttons. Komponen buttons dapat ditempatkan di dalam toolbar menggunakan slot bernama. Slot "primary" dan "secondary" berperilaku secara berbeda di mode ios dan md.

Searchbar

Inputan pencarian dapat ditempatkan di dalam toolbar untuk mencari informasi yang terkait dengan konten. Ia harus menjadi anak tunggal komponen dari toolbar dan akan mengisi luas dan tinggi penuh.

Segment

Segment biasanya digunakan di dalam toolbar untuk berpindah antara dua tampilan konten yang sama pada halaman web. Ia dapat ditempatkan di dalam toolbar dengan komponen lain, seperti tombol, tetapi tidak boleh ditempatkan di samping judul.

Progress Bar

Progress bar digunakan sebagai indikator loading untuk menunjukkan proses yang sedang berlangsung di dalam aplikasi. Progress bar dapat ditempatkan bersama dengan komponen lain di dalam toolbar dan akan sejajar dengan bagian bawah toolbar.

Warna

Toolbar dapat memiliki warna yang berbeda tergantung pada tema yang digunakan. Warna default adalah "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", dan "dark".

Kustomisasi CSS

Dalam mode md, <ion-header> akan menerima bayangan box di bawah, sedangkan <ion-footer> akan menerima bayangan box di atas. Dalam mode ios, <ion-header> akan menerima garis batas di bawah, sedangkan <ion-footer> akan menerima garis batas di atas.

Daftar Properti

Berikut adalah daftar properti yang dapat digunakan untuk mengcustomisasi toolbar:

• background: Warna latar belakang toolbar
• border-color: Warna garis batas toolbar
• border-style: Gaya garis batas toolbar
• border-width: Lebar garis batas toolbar
• color: Warna teks toolbar
• min-height: Tinggi minimal toolbar
• opacity: Kedipan latar belakang toolbar
• padding-bottom: Jarak antara bagian bawah toolbar dengan konten
• padding-end: Jarak antara bagian kanan toolbar dengan konten (di mode LTR) atau kiri (di mode RTL)
• padding-start: Jarak antara bagian kiri toolbar dengan konten (di mode LTR) atau kanan (di mode RTL)
• padding-top: Jarak antara bagian atas toolbar dengan konten

Dengan demikian, kita dapat mengcustomisasi toolbar di dalam aplikasi Ionic untuk mencapai tema dan gaya yang diinginkan.