Framework7 – Hello World Button and Dialog

Oclemy December 19, 2020 11 0

SaveSavedRemoved 0

User Management System

Learn Kotlin, Retrofit, MVVM and MySQL using this all-in-one app. It is designed to be beginner friendly.

Download Now

This is our Hello word in Framework7 and we use ES6 to write our javascript code.

In this example, we show how to use a button and how to show material modals in Framework7.

Let's go.

main.js

/*
 -Initialize your app
 -Export selectors engine
 */

const myApp = new Framework7();
const $$ = Dom7;

/*
Our class
*/
class MainClass {
    constructor () {
    }

    initializeApp() { 
        $$('#cyanBtn').on('click', () => { myApp.alert('Cyan Clicked');});
        $$('#tealBtn').on('click', () => { myApp.alert('Teal Clicked'); });
    }
}

m=new MainClass();
m.initializeApp();

index.html

<!DOCTYPE html>
<html>
  <head>
    <!--META ATTRIBUTES-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <title>Camposha.info</title>

    <!-- REFERENCE CSS-->
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">

  </head>
  <body>

    <!-- VIEWS-->
    <div class="views">

      <!-- Your main view, should have "view-main" class-->
      <div class="view view-main">

        <!-- Top Navbar-->
        <div class="navbar">
          <div class="navbar-inner">

            <!-- We have home navbar without left link-->
            <div class="center sliding">Awesome App</div>
            <div class="right">
              <!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only"> <i class="icon icon-bars"></i></a>
            </div>
          </div>
        </div>

        <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">

          <!-- Page, data-page contains page name-->
          <div data-page="index" class="page">

            <!-- Scrollable page content-->
            <div class="page-content">
              <div class="content-block-title"><h1>Welcome To Camposha.</h1></div>
              <div class="content-block">
                <div class="content-block-inner">
                  <h5>Camposha.info is a tutorials website.</h5>
                  <P> We do Java,Javascript,C#, Python, PHP among other web technologies.</P>
                </div>
              </div>

              <div class="content-block-title">Buttons</div>
              <div class="content-block">
                <div class="row">
                  <div class="col-50"><a href="#" id="cyanBtn" class="button button-raised button-fill color-cyan">Cyan</a></div>
                  <div class="col-50"><a href="#" id="tealBtn" class="button button-raised button-fill color-teal">Teal</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Bottom Toolbar-->
        <div class="toolbar">
          <div class="toolbar-inner"><a href="#" class="link">Next</a><a href="#" class="link">Previous</a></div>
        </div>
      </div>
    </div>

    <!-- REFERENCE SCRIPTS-->
    <script type="text/javascript" src="assets/js/framework7.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
  </body>
</html>