"Laut yang tenang tidak menghasilkan pelaut yang terampil

Total 4 Results

Pengenalan Mobile Programming

Pada kesempatan kali ini kami akan membagikan sebagian ilmu pengetahuan mengenai pemrograman berbasis mobile.Mobile Programing merupakan sebuah bahasa pemrograman yang berfokus pada platform mobile. Yang dimaksud mobile disini adalah sebuah perangkat elektronik yang memungkinkan untuk dibawa kemana saja yang bersifat simple. Dengan demikian, maka perangkat mobile yang dimaksud adalah Handphone. Tentu kehadiran perangkat handphone sangat membantu setiap kehidupan manusia dalam beraktivitas sehari hari beberapa manfaat dengan adanya perangkat ini adalah , untuk mempermudah dalam komunikasi dan interaksi sosial dan juga lebih fleksibel.Semakin pesat perkembangan teknologi,kemudian muncul beberapa inovasi dari sistem operasi yang mulai masuk ke dalam mobile, yang mana memiliki kemampuan lebih dibanding handhphone sebelumnya, dan juga mempunyai beberapa fitur sehingga memiliki istilah atau sebutan Telepon Pintar (Smartphone). Telepon Pintar sendiri mempunyai beberapa sistem operasi yang sudah banyak dikenal dikalangan masyarakat, Android, IOS, Windows Phone. didalam pembahasan kali ini, kami akan fokus pada sistem operasi Android.Android merupakan merupakan sebuah sistem operasi yang mendukung pada platform mobile. Dengan sifat opensource, menjadikan android semakin mudah dan menjadi pilihan oleh para pengembang aplikasi untuk menciptakan ataupun menambah fitur-fitur aplikasi. adapun urutan jenis Android dimulai dari versi 1.5 Cupcake, untuk versi 1.6 dinamakan Donut kemudian pada tahun 2009 muncul nama Eclair dengan menggunakan kode 2.0. Sampai sekarang terdapat beberapa versi terbaru mulai Android Nougat, Oreo, Pie Dst.Didalam pengembangan aplikasi android terdapat beberapa struktur program, mulai dengan pemrograman native , Web View, Hybrid masing -masing mempunyai kekurangan dan kelebihan . kali ini Android Corners, akan membahas lebih dalam mengenai pemrograman android dengan sistem hybrid. Hybrid apps adalah gabungan antara aplikasi native dan aplikasi web, sama seperti native apps, hybrid apps juga bisa tersedia di apps store. Aplikasi hybrid juga sangat popular karena memungkinkan pengembangan bisa dari aplikasi web ke platform aplikasi mobile dan dengan demikian secara signifikan mengurangi biaya pengembangan aplikasi mobile .Kelebihan pemrograman Hybrid diantaranya adalah output yang dihasilkan dapat bersifat multiplatform, Performa lebih cepat dibanding dengan Web View, dalam segi interface, pemrograman hybrid lebih unggul dibandingkan native. Untuk pengoperasiaannya, pemrograman hybrid ini bisa digunakan secara Online Ataupun Offline.terdapat beberapa struktur didalam pemrograman hybrid:1. Framework HTMLBerperan sebagai interface pada aplikasi hybrid, didalam nya juga medukung CSS dan Juga Bootstrap.2. Client Side ProgrammingBerperan sebagai pemroses informasi/data pada aplikasi Hybrid3. Compiler AppsBerperan sebagai Compiler/Builder untuk menghasilkan output pada platform tertentu.4. Library (opsional)pada bab ini, terdapat beberapa library pendukung untuk menghasilkan/mengaktifkan fitur yang mendukung pada masing-masing perangkat, misalnya barcode scanner, GPS, Dsb.Pengenalan Framework7Framework7 merupakan sebuah framework mobile HTML gratis dan opensource untuk pengembangan software mobile hybrid ataupun aplikasi web dengan interface dan konsep asli Android & iOS. Ini merupakan suatu software prototyping yang dibutuhkan untuk menampilkan prototype aplikasi kerja secepat mungkin ketika diperlukan.Framework7 berperan seperti bootstrap dalam membangun website, sehingga dapat dikatakan bahwa Framework7 untuk menangani interface dalam sebuah aplikasi. sedangkan dalam transmisi data dan informasi bisa ditangani secara Client Side dalam istilah lain disebut (Client Side Script Programming).Package StructureSeperti pada umumnya framework. framework7 mempunyai struktur.1. Index.html2. Framework.min.css3. App.jsDidalamnya juga terdapat beberapa file pendukung, seperti framework7-bundle.min.js, accordion, lazy.js dan juga masih banyak lagi. ada juga beberapa fitur yang bisa dikatakan lengkap yang sudah include dalam paket ini. seperti Floating Action Button, Lazy Load, Image Viewer, Slider, Accordion, Smart Select dll, dengan tujuan untuk memudahkan dalam proses pengembangan Aplikasi berbasis Mobile ataupun Desktop.Framework ini sangat cocok untuk pemula seperti saya yang sedang mempelajari bahasa pemrograman HTML,Javascript dan juga PHP.bagi teman-teman yang hendak mempelajari pemrograman mobile menggunakan framework7 ini cukup menyiapkan beberapa perangkat lunak(software) pendukung seperti. Code Editor untuk pengolahan listing program , Xampp sebagai Web Server, Hybrid Emulator bisa menggunakan beberapa browser yang disukai, dalam hal ini kami sarankan untuk menggunakan Google Chrome. Untuk proses testing APK, Bisa menggunakan emulator Bluestack dan sejenisnya. atau juga langsung bisa menggunakan perangkat telepon secara langsung.Demikian sedikit ilmu yang kami bagikan, semoga teman-teman semua diberikan kemudahan dan kebarokahan dalam mencari ilmu. Semangat Belajar .

More details

Published - Sun, 06 Nov 2022

Created by - Kurnia Andi Nugroho

Install Framework7

Kemarin kita semua telah mempelajari sekilas tentang pengenalan mobile programing, kali ini kita akan masuk pada sesi berikutnya yaitu proses instalasi. karena terdapat beberapa opsi instalasi, ada opsi instalasi via terminal dengan bantuan node js dengan cara mengetikkan perintah di terminal npm install framework7. tapi pada langkah kali ini kita akan melakukan instalasi via github saja, agar lebih mudah dan cepat.teman-teman bisa mengunduh via link https://github.com/framework7io/framework7/releases Pastikan teman-teman mengunduh file dengan nama Source Code.tar.gz. jika sudah lakukan extract pada file yang sudah du download. kurang lebih akan ada beberap folder dan file seperti dibawah ini disana terdapat beberapa versi yang disediakan ada yang menggunakan vue,react dan juga natural javascript. kali ini kita akan menggunakan versi natural javascript sebagai langkah awal untuk memahami alur dari framework7. setelah teman-teman mengunduh file dengan ekstensi tar.gz kemudian lakukan extract file kedalam direktori yang telah disediakan. dalam hal ini kami sarankan untuk menaruh didalam direktori xampp, karena akan berkelanjutan untuk project berikutnya.penjelasan singkat yang akan kami uraikan dalam hal ini akan menuju pada yang inti saja, agar lebih mempersingkat pembelajaran. didalam direktori utama kita akan membuat sebuah file dengan extensi file html. dalam hal ini kami menyimpan di folder C:\xampp\htdocs\framework7 . berikut listing kode index.html<!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="path/to/framework7-bundle.min.css">  <link rel="stylesheet" href="path/to/my-app.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">Awesome App</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"> <p>Page content goes here</p>  <a href="/about/">About app</a> </div> </div> </div> </div>  <script type="text/javascript" src="path/to/framework7-bundle.min.js"></script>  <script type="text/javascript" src="path/to/my-app.js"></script> </body> </html> Seperti yang sudah kita ketahui dalam bahasa HTML terdapat beberapa tag yang nantinya juga akan diterapkan di framework7. yang patut digaris bawahi adalah div dengan id app, bahwasanya id ini akan berhubungan dengan file javascript kita. penamaan ini tidak harus menggunakan kata app, bisa dengan sesuai keinginan teman-teman.oke selanjutnya pada instalasi file javascript. pada listingan kode index.html diatas, pada baris ke-3 sebelum akhir terdapat sebuah source path/to/my-app.js. perlu diketahui bahwasanya penyimpanan source atau sumber file mengarah langsung pada direktori project kita. dalam hal ini kita akan merubah nya menjadi assets/js/my-app.js hal ini juga berlaku untuk file tambahan lainnya seperti css, bootstrap dll.berikut listing kode my-app.js.var app = new Framework7({ // App root element el: '#app', // App Name name: 'My App', // App id id: 'com.myapp.test', // Enable swipe panel panel: { swipe: true, }, // Add default routes routes: [ { path: '/about/', url: 'about.html', }, ], // ... other parameters }); var mainView = app.views.create('.view-main'); Variable app mewakili semua perintah yang nantinya akan ditampilkan di index.html. dibawahnya terdapat beberapa parameter yang nantinya bisa kita tambahkan seperti Page Stack, Routes Dsb.sampai pada langkah ini teman-teman sudah berhasil melakukan instalasi Framework7. uuntuk mencoba kita bisa menggunakan browser. maka akan tampil seperti gambar dibawah iniperlu diketahui untuk mendapatkan tampilan landscape seperti diatas.teman-teman bisa membuka inspect elemen di browser teman-teman, kemudian pilih dan coba dimensi yang cocok .Sampai disini semoga teman-teman berhasil melakukan instalasi dengan benar.

More details

Published - Mon, 07 Nov 2022

Created by - Kurnia Andi Nugroho

Manajemen Page Framework7

Berlanjut pada sesi berikutnya yaitu manajemen page, atau juga bisa disebut dengan mengelola ataupun mengurus halaman. dalam hal ini kita bisa mengarahkan setiap komponen yang di click menuju halaman yang di tentukan.Oke langsung saja teman-teman buka kembali recent project pada tutorial sebelumnya.Kami menggunakan text editor Visual Studio, teman teman bisa menggunakan text editor kesukaan teman-teman. oke, ditinjau dari gambar diatas saya menaruh project didalam folder framework7 di direktori C:/Xampp/htdocs/framework7. Hal ini ketika nantinya diakses melalui browser, dengan menggunakan web server local maka akan menghasilkan URL localhost/framework7.yang perlu diperhatikan dalam manajemen page adalah pada kode <div data-name="home" class="page">. Data name mengidentifikasikan nama halaman yang kita buat, sedangkan class merupakan definisi type halaman tersebut. berarti halaman diatas mempunyai nama home dan class page, jadi ketika teman-teman mengakses localhost/framework7 maka yang ditampilkan adalah halaman tersebut.diatas merupakan tampilan ketika teman-teman mengakses nya. panah nomor 1 menunjukkan Navbar, Sedangkan nomor 2 merupakan Content, pada panah nomor 3 merupakan Toolbar . banyak template ataupun customisasi yang disediakan. ini merupakan basic dasar untuk mengetahui tata letak kerangka framework7.nah, pada pembahasan kali ini kita akan membuat halaman baru, agar kita bisa berpindah dari halaman satu menuju halaman lainnya. Berikut contoh sederhana listing code untuk mencoba manajemen page di dalam framework7<!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"> </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 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>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> </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> Dari kode diatas, kita telah menambahkan beberapa button dihalaman home, hal ini sebagai contoh kecil untuk mencoba berpindah dari halaman satu menuju halaman lainnya. Salah satunya terdapat button accordion, diharapkan ketika kita melakukan click pada button tersebut maka kita akan diarahkan menuju halaman accordion.bisa di lihat hasilnya seperti gambar dibawah ini.kita tambahkan parameter stackPages yang berada pada file my-app.js.var app = new Framework7({ el: '#app', name: 'My App', id: 'com.myapp.test', panel: { swipe: true, }, view: { stackPages: true, }, routes: [ { path: '/about/', url: 'about.html', }, ], }); var mainView = app.views.create('.view-main'); oke sampai disini kita berhasil menambahkan parameter stackPages dan merubah nilainya menjadi true. hal ini bertujuan agar pembuatan halaman bisa dilakukan dalam satu file saja, yaitu didalam file index.html.langkah selanjutnya kita cukup membuat div baru di dalam file index.html tepatnya dibawah div penutup dari class page pertama. Listing code dibawah ini merupakan contoh sederhana untuk halaman accordion. <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 data-name="accordion" class="page stacked"> data name accordion untuk nantinya kita gunakan dalam proses routing atau pengarahan halaman didalam file my-app.js sedangkan class page stacked bertujuan agar ketika halaman home diakses maka halaman ini tidak akan tampil bisa dikatakan untuk memaniplasi halaman ini dibawah halaman home. Untuk daftar lengkap code index.html bisa dilihat seperti 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"> </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 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>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> setelah teman-teman berhasil menggabungkan antara page dan stack page, langkah selanjutnya adalah menambahkan parameter route di file my-app.js.var app = new Framework7({ el: '#app', name: 'My App', id: 'com.myapp.test', panel: { swipe: true, }, view: { stackPages: true, }, routes: [{ path: '/accordion/', pageName: 'accordion' }, ], }); var mainView = app.views.create('.view-main'); pada baris routes diatas kita bisa melihat ada path dan juga pageName, path disini berarti kita harus mencantumkan dimana nantinya halaman ini kita akses, pada kode seblumnya kita melettakan pada button dengan kode <a href="/accordion/" nah ini harus sama dengan path di route kita. Sedangkan pageName adalah page stacked yang tadi kita tambahkan di halaman index.html. jika button accordion kita click, maka kita akan diarahkan menuju halaman accordian yang baru saja dibuat .kurang lebih seperti gambar dibawah ini.Sampai disini semoga teman-teman berhasil melakukan percobaan manajemen page . Jika teradapat problem, mari sama sama kita selesaikan dikolom komentar untuk berdiskusi

More details

Published - Tue, 08 Nov 2022

Created by - Kurnia Andi Nugroho

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>

More details

Published - Wed, 09 Nov 2022