Published - Wed, 09 Nov 2022

Komponen Framework7

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 <link rel="stylesheet" href="assets/css/framework7-icons.css"> kedalam file index.html lebih tepatnya didalam tag <head>, agar library yang kita tambahkan didalam folder assets terbaca oleh framework7, jika sudah maka akan seperti ini

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#2196f3">
  <title>My App</title>
  <link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
  <link rel="stylesheet" href="assets/css/my-app.css">
  <link rel="stylesheet" href="assets/css/framework7-icons.css">
</head>

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 <i class="icon f7-icons ">dot_radiowaves_left_right</i> 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.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#2196f3">
  <title>My App</title>
  <link rel="stylesheet" href="assets/css/framework7-bundle.min.css">
  <link rel="stylesheet" href="assets/css/my-app.css">
  <link rel="stylesheet" href="assets/css/framework7-icons.css">
</head>

<body>
  <div id="app">
    <div class="view view-main">
      <div data-name="home" class="page">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Aplikasi Sederhana</div>
          </div>
        </div>
        <div class="toolbar tabbar tabbar-labels toolbar-bottom color-theme-green">
          <div class="toolbar-inner">
            <a href="#tab-4" class="tab-link tab-link-active">
              <i class="f7-icons ">house</i>
              <span class="tabbar-label color-theme-green">Home</span>
            </a>
            <a href="#tab-6" class="tab-link">
              <i class="icon f7-icons ">dot_radiowaves_left_right</i>
              <span class="tabbar-label color-theme-green">Informasi</span>
            </a>
          </div>
        </div>
        <div class="page-content">
          <center>
            <p>Silahkan Mencoba</p>
          </center>
          <a href="/accordion/" class="inner-patient-col button button-raised color-orange">Accordion</a>
          <a href="/action/" class="inner-patient-col button button-raised color-lightblue">action sheet</a>
          <a href="/app/" class="inner-patient-col button button-raised color-pink">app bar</a>
          <a href="/area/" class="inner-patient-col button button-raised color-yellow">Area chart</a>
          <a href="/auto/" class="inner-patient-col button button-raised color-deeppurple">Auto Complete</a>
          <a href="/badge/" class="inner-patient-col button button-raised color-teal">Badge</a>
          <a href="/contentblock/" class="inner-patient-col button button-raised color-red">Content block</a>
        </div>
      </div>
      <div data-name="accordion" class="page stacked">
        <div class="navbar">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">
            <div class="title">Accordion</div>
          </div>
        </div>
        <div class="toolbar toolbar-bottom">
          <div class="toolbar-inner">
            <a href="#" class="link">Link 1</a>
            <a href="#" class="link">Link 2</a>
          </div>
        </div>
        <div class="page-content">
          <center>
            <p>Ini Halaman Accordion</p>
          </center>
          <div class="list accordion-list">
            <ul>
              <li class="accordion-item">
                <a href="" class="item-link item-content">
                  <div class="item-inner">
                    <div class="item-title">Item 1</div>
                  </div>
                </a>
                <div class="accordion-item-content">Item 1 content ...</div>
              </li>
              <li class="accordion-item">
                <a href="" class="item-link item-content">
                  <div class="item-inner">
                    <div class="item-title">Item 2</div>
                  </div>
                </a>
                <div class="accordion-item-content">Item 2 content ...</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="assets/js/framework7-bundle.min.js"></script>
  <script type="text/javascript" src="assets/js/my-app.js"></script>
</body>

</html>