Mengenal Komponen – komponen Dasar dalam Framework 7

Framework 7 adalah HTML mobile framework yang digunakan untuk mengembangkan aplikasi hybrid baik itu aplikasi mobile atau pun website. Dengan menggunakan framework ini maka tampilan aplikasi yang Anda kembangkan dapat menyerupai aplikasi bawaan pada iOS dan Android.

Framework ini juga bersifat open source sehingga gratis untuk digunakan. Jika Anda tertarik untuk mengembangkan aplikasi dengan Framework 7, maka Anda harus sudah familiar dengan HTML, CSS, serta JavaScript. Sebelum Anda mulai mengembangkan aplikasi, ada baiknya jika Anda mengetahui komponen yang ada pada framework 7 ini.

1. Page

Page adalah salah satu komponen utama yang berfungsi sebagai containers untuk menampilkan konten yang ada di dalam aplikasi.

Setiap halaman memiliki atribut “data-name”. Atribut ini tidak harus ada, namun tetap diperlukan dalam “page events” dan “page callbacks”. Atribut akan membantu sistem untuk menentukan halaman mana yang dimuat dan tersedia, sehingga Anda dapat manipulasi yang diperlukan untuk halaman tersebut. Sebagai contoh, jika Anda ingin menampilkan halaman profil dari halaman home, maka atribut data name bernilai “profil”.

Sedang semua konten visual seperti form, table, button dan lain-lain, harus dimasukkan di dalamnya <div class=”page-content”>. Contohnya, ketika Anda membuat button pada page-content home dengan tulisan “Klik Disini”, maka source codenya adalah sebagai berikut :

<div class="page-content">
  <button class="col button button-fill color-red">Klik Disini</button>
  <!-- Link to another page -->
  <a href="/about/">About app</a>
</div>

2. Navbar

Navbar merupakan suatu area yang berada di bagian atas layar berisi judul halaman dan elemen navigasi. Di dalam Framework 7, navbar memiliki 3 bagian utama yaitu Left, Title dan Right. Sebenarnya Anda dapat mengisi 3 bagian tersebut dengan HTML content apa pun yang Anda inginkan, namun sebaiknya Anda mengisi bagian tersebut sesuai saran framework 7 yaitu :

• Left, berisi elemen navigasi.
• Title, berisi judul.
• Right, berisi elemen navigasi.

3. Toolbar / Tabbar

Toolbar adalah area yang berada di bagian atas atau bawah yang berisi elemen untuk navigasi. Berikut ini adalah struktur toolbar pada Frameowrk 7.

Jika Anda ingin meletakkan toolbar di atas, maka Anda harus menambahkan toolbar-top class kedalam toolbar elemen :

<!-- Top Toolbar -->
<div class="toolbar toolbar-top">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

Sedangkan jika Anda ingin meletakkannya dibawah maka, toolbar-bottom class yang harus Anda tambahkan.

<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
  <div class="toolbar-inner">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <a href="#" class="link">Link 3</a>
  </div>
</div>

4. Icon

Secara default Framework 7 menyediakan beberapa icon umum seperti back, forward, previous dan next. Namun jika aplikasi Anda membutuhkan lebih banyak icon, maka Anda dapat menunduhnya secara manual di github.com

Baca Juga: 5 Framework CSS Terbaik di Tahun 2020

5. Button/tombol

Framework 7 menyediakan banyak pilihan tombol. Jika Anda ingin menggunakannya, maka hal yang perlu Anda lakukan adalah menambahkan class button yang sesuai ke tautan Anda seperti berikut.

<!-- link as button -->
<a class="button">Button</a>
<!-- <button> as button -->
<button class="button">Button</button>
<!-- <input type="submit"> as button -->
<input type="submit" class="button" value="Button">

6. Color Themes

Selain warna light (default), Framework 7 menyediakan banyak pilihan warna bahkan warna gelap atau yang biasa digunakan untuk dark mode. Untuk menggunakannya, Anda cukup menambahkan class color-theme-[color] ke elemen induk yang diperlukan.

Sedang untuk warna gelap maka class theme-dark yang perlu ditambahkan.

Baca Juga: 4 Framework Javascript Populer yang Sering Digunakan