Komponen merupakan bagian dari keseluruhan, begitu juga didalam framework7 terdapat banyak sekali components pendukung yang disediakan, hal ini tidak lain untuk mempermudah dalam pengembangan sebuah aplikasi berbasis mobile ataupun desktop dengan framework7. jika teman-teman sering mempelajari bahasa pemrograman HTML, maka nanti tidak akan asing dengan istilah components di framework7. Pada tutorial sebelumnya kita semua telah mengetahui cara instalasi dan inisialisasi framework7, pada pembahasan kali ini, saatnya kita akan belajar tentang komponen nya.

Kami sarankan dalam mengikuti pembelajaran ini sembari membuka website official Dokumen dengan tujuan Agar proses pembelajaran menjadi lebih mudah. jika sudah, teman-teman bisa melihat beberapa komponen, mulai Accordion, Action sheet, Appbar Dst. untuk prakteknya, mari kita coba menerapkan komponen Toolbar/tabbar didalam aplikasi kita sebelumnya.

seperti biasanya kita buka terlebih dahulu recent project kita menggunakan code editor.

Perlu di ingat, dalam studi pembelajaran kali ini kita akan fokus pada satu bab saja yaitu tabbar/toolbar, toolbar sendiri memiliki beberapa jenis, mulai dari static toolbar, fixed toolbar, dan Common toolbar. pada project sebelumnya toolbar kita masih berupa static toolbar, yang mana tampilan nya masih sangat biasa,

Gambar diatas merupakan toolbar dengan jenis static,kali ini kita akan mengeksplorasi fitur/jenis lainnya yang sudah disediakan di dokumen komponen framework7. kita bisa membuat tabbar dengan tampilan icon dan juga tulisan agar terlihat user friendly. sebelumnya kita harus menambhakan library font kedalam folder assets/.teman-teman bisa mengunduh via link github. ja sudah d unduh didalamnya terdapat folder fonts dan juga satu file css. untuk penempatannya akan kita lettakkan pada direktori assets, lebih lengkapnya seperti gambar dibawah ini.

Untuk penempatan file css, disini kami meletakkan didalam satu folder css, agar lebih rapih dalam pengelompokkan jenis file.

Sampai disini kita berhasil menaambah library fonts framework7 didalam project kita, yang jadi pertanyaannya adalah apa tujuan dari penambahan library ini? sebelum kami jawab, mari kita lanjutkan step berikutnya heheheh.

mari kita menambah code  kedalam file index.html lebih tepatnya didalam tag , agar library yang kita tambahkan didalam folder assets terbaca oleh framework7, jika sudah maka akan seperti ini

Setelah semuanya selesai kita bisa menggunakan fitur icons didalam framework7.

untuk lebih lengkapnya, teman- teman bisa menggunakan cheatsheet berikut untuk dengan mudah menemukan ikon yang ingin teman-teman gunakan.

Cara untuk menggunakan icon diatas adalah dengan menambahkan class dot_radiowaves_left_right code dot_radiowaves_left_right menunjukan nama icon yang hendak digunakan, ini merupakan contoh basic dalam penggunaan icons di framework7. kami menerapkan kode diatas kedalam tabbar, jadi toolbar/tabbar aplikasi kita akan berubah menjadi icon bukan static lagi.seperti gambar dibawah ini.

Nah, kita berhasil merubah tabbar kita menjadi bentuk icons, bagaiamana? mudah bukan .

untuk kelengkapan code index.html bisa teman-teman tinjau dibawah ini.

  
  
  
  
  
  
  
  



  

    

      

        

          

          

            
Aplikasi Sederhana
          
        
        

          

            
              house
              Home
            
            
              dot_radiowaves_left_right
              Informasi
            
          
        
        

          
            
Silahkan Mencoba
          
          Accordion
          action sheet
          app bar
          Area chart
          Auto Complete
          Badge
          Content block
        
      
      

        

          

          

            
Accordion
          
        
        

          

            Link 1
            Link 2
          
        
        

          
            
Ini Halaman Accordion
          
          

            

              

                
                  

                    
Item 1
                  
                
                
Item 1 content ...
              
              

                
                  

                    
Item 2
                  
                
                
Item 2 content ...