App / Core

    When we init the app we can use the new Framework7 constructor and pass an object with main app parameters:

    var app = new Framework7({
      // App id
      id: 'com.myapp.test',
      // Enable swipe panel
      panel: {
        swipe: 'left',
      },
      // ... other parameters
    });

    This constructor returns main app Framework7 instance.

    App Parameters

    Lets look at the list of available parameters:

    Parameter Type Default Description
    root string body App root element. If you main app layout is not a direct child of the <body> then it is required to specify root element here
    id string io.framework7.testapp App bundle id.
    name string Framework7 App name. Can be used by other components, e.g. as the default title for Dialog component.
    version string 1.0.0 App version. Can be used by other components.
    theme string auto App theme. Can be ios, md or auto. In case of auto it will use iOS theme for iOS devices and MD theme for all other devices.
    language string App language. Can be used by other components. By default equal to the current browser/webview language (i.e. navigator.language).
    routes array [] Array with default routes to all views.
    data function App root data. Must be a function that returns an object with root data. For example:
    var app = new Framework7({
      data: function () {
        return {
          username: 'vladimir',
          firstName: 'Vladimir',
          lastName: 'Kharlampidi'
        };
      },
    });

    Note, that this inside of this data function points to app Framework7 instance.

    methods object {} App root methods. Object with methods, e.g.
    var app = new Framework7({
      methods: {
        alert: function() {
          app.dialog.alert('Hello World');
        }
      }
    });

    Note, that this inside of each method points to app Framework7 instance.

    on object {} Object with events handlers. For example:
    var app = new Framework({
      on: {
        init: function () {
          console.log('App initialized'),
        },
        pageInit: function () {
          console.log('Page initialized'),
        },
      }
    })
    init boolean true By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with app.init() when you need it.
    initOnDeviceReady boolean true If automatic initialization is enabled with init: true parameter and app is running under cordova environment then it will be initialized on deviceready event.
    Clicks Module Parameters
    clicks object Object with clicks-module related parameters:
    var app = new Framework7({
      clicks: {
        externalLinks: '.external',
      }
    })
    {
    externalLinks string '.external' CSS selector for links that should be treated as external and shouldn't be handled by Framework7. For example such '.external' value will match to links like <a href="somepage.html" class="external"> (with class "external")
    }
    Touch Module Parameters
    touch object Object with touch-module related parameters:
    var app = new Framework7({
      touch: {
        tapHold: true,
      }
    })
    {
    fastClicks boolean true Fast clicks is a built-in library that removes 300ms delay from links and form elements in mobile browser while you click them. You can disable this built-in library if you want to use other third party fast clicks script.
    fastClicksDistanceThreshold number 10 Distance threshold (in px) to prevent short taps. So if tap/move distance is larger than this value then "click" will not be triggered
    fastClicksDelayBetweenClicks number 50 Minimal allowed delay (in ms) between multiple clicks
    fastClicksExclude string This parameter allows to specify elements not handled by fast clicks by passing CSS selector of such elements
    disableContextMenu boolean true
    tapHold boolean false Enables tap hold
    tapHoldDelay number 750 Determines how long (in ms) the user must hold their tap before the taphold event is fired on the target element
    tapHoldPreventClicks boolean true When enabled (by default), then click event will not be fired after tap hold event
    activeState boolean true When enabled, app will add "active-state" class to currently touched (:active) element.
    activeStateElements string a, button, label, span, .actions-button CSS selector of elements where enabled activeState will add appropriate active class
    materialRipple boolean true Enables Material theme specific touch ripple effect
    materialRippleElements string .ripple, .link, .item-link, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell, .notification-close-button CSS selector of elements to apply touch ripple effect on click
    }

    These are default app parameters for app core module.

    Most of components that has JavaScript API may extend this list of parameters with the property named as component. For example Panel component extends app parameters with panel property that accepts Panel specific parameters.

    Example:

    var app = new Framework7({
      id: 'com.myapp.test',
      // Extended by Panel component:
      panel: {
        swipe: 'left',
        leftBreakpoint: 768,
        rightBreakpoint: 1024,
      },
      // Extended by Dialog component:
      dialog: {
        title: 'My App',
      },
      // Extended by Statusbar component:
      statusbar: {
        iosOverlaysWebview: true,
      },
    });

    App Methods & Properties

    Returned Framework7 instance app contains a lot of useful properties and methods:

    Properties
    app.id App ID passed in parameters
    app.name App name passed in parameters
    app.version App version
    app.routes App routes
    app.language App language
    app.root Dom7 instance with app root element
    app.rtl Boolean property indicating app is in RTL layout or not
    app.theme Current app theme. Can be md or ios
    app.data Object with app root data passed on intialization
    app.methods Object with app root methods
    app.width App width in px
    app.height App height in px
    app.left App left offset in px
    app.top App top offset in px
    app.initialized Boolean property indicating app is initialized or not
    app.$ Dom7 alias
    app.t7 Template7 alias
    app.params App parameters
    app.support Object with properties about supported features. Check the Support utilities section
    app.device Object with properties about device. Check the Device utilities section
    app.utils Object with some useful utilities. Check the Utils section
    app.request Contains methods to work with XHR requests. Check the Request utilities section
    Methods
    app.on(event, handler) Add event handler
    app.once(event, handler) Add event handler that will be removed after it was fired
    app.off(event, handler) Remove event handler
    app.off(event) Remove all handlers for specified event
    app.emit(event, ...args) Fire event on instance
    app.init() Initialize app. In case you disabled auto initialization with init: false parameter

    Same as with app parameters most of components that has JavaScript API may extend this list of properties with the property named as component. For example Panel component extends app instance properties with panel property that accepts Panel specific properties and methods.

    Example:

    // Open panel
    app.panel.open('left');
    
    // Hide statusbar
    app.statusbar.hide();

    App Events

    App instance emits the following core events:

    Event Arguments Description
    init Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init.
    resize Event will be fired on app resize (window resize).
    orientationchange Event will be fired on app orientation change (window orientantion change).
    click event Event will be fired on app click
    touchstart:active event Event will be fired on touch start (mousedown) event added as active listener (possible to prevent default)
    touchmove:active event Event will be fired on touch move (mousemove) event added as active listener (possible to prevent default)
    touchend:active event Event will be fired on touch end (mouseup) event added as active listener (possible to prevent default)
    touchstart:passive event Event will be fired on touch start (mousedown) event added as passive listener (impossible to prevent default)
    touchmove:passive event Event will be fired on touch move (mousemove) event added as passive listener (impossible to prevent default)
    touchend:passive event Event will be fired on touch end (mouseup) event added as passive listener (impossible to prevent default)

    And again, most of components that has JavaScript API may extend this list of events like Panel component will also trigger additional events on app instance.

    Example:

    app.on('panelOpen', function (panel) {
      console.log('Panel ' + panel.side + ' opened');
    });