Framework7 is a free and open source framework for mobile HTML. It is used for developing hybrid mobile apps or web apps for iOS and Android devices.
History: Framework7 was introduced in the year 2014. The latest version 1.4.2 was released on February 2016 licensed under MIT.
What Are The Framework7 Layouts?
Framework7 provides different types of layouts for your application. It supports for three types of Navbar/Toolbar layouts:
Static Layout: The static layout is most often used layout type and includes navbar and toolbar which can be scroll-able page content and each page contains its own navbar and toolbar.
Fixed Layout: Fixed layout includes its own navbar and toolbar which can be visible on screen and cannot be scrollable on page.
Through Layout: In this layout, the navbar and toolbar appears fixed for all pages within single view.
Mixed Layout: You can mix the different types of layouts in the single view.
What Are Framework7 Navbars?
Navbar consists of 3 parts each of which may contain any HTML content, but it is suggested to use them like the way given below:
Left: It is designed to place back link icons or single text link.
Center: It is used to display title of the page or tab links.
Right: This part can be used similar as left part.
Below table demonstrates the use of navbar in detail:
- Basic navbar: A basic navbar can be created by using the navbar, navbar-inner, left, center and right classes.
- Navbar with links: To use links in left and right part of your navbar, just add <a> tag with class link.
- Multiple links: To use multiple links, just add few more <a class="link"> to the part of your choice.
- Links with text and icons: The links can be provided with icons and text by adding classes for icons and wrapping the link text with <span> element.
- Links with only icons: Navbar links can be provided with only icons by adding icon-only class to links.
- Related app and view methods: On initializing the View, framework7 allows you to use methods available for navbar.
- Hide navbar automatically: The navbar can be hidden/shown automatically for some Ajax loaded pages where navbar is not required.
Toolbar provides easy access to other pages by using navigation elements at the bottom of the screen.
You can use toolbar in two ways as specified in the table:
Hide Toolbar: You can hide the toolbar automatically when you load the pages by using the no-toolbar class to loaded page.
Bottom Toolbar: Place the toolbar at the bottom of the page by using the toolbar-bottom class.
Methods of Toolbar: The following available methods can be used with Toolbars:
myApp.hideToolbar(toolbar): It hides the specified toolbar.
myApp.showToolbar(toolbar): It shows the specified toolbar.
view.hideToolbar(): It hides the specified toolbar in the view.
view.showToolbar(): It shows the specified toolbar in the view.
Why To Use Framework7?
It is easier to develop apps for iOS and Android.
The learning curve for Framework7 is very easy.
It has many pre-styled widgets/components.
It has built-in helper libraries.
What Are The Features Of Framework7?
Framework7 is an open source and free to use framework.
Framework7 has easy and familiar jQuery syntax to get started without any delay.
To control click delay for touch UI's, Framework7 has built-in FastClick library.
Framework7 has built-in grid system layout for arranging your elements responsively.
Framework7 dynamically loads page from template via flexible router api.
What Are The Advantages And Disadvantages Of Framework7?
Advantages
Framework7 is not dependent on any third party library even for DOM manipulation instead it has its own custom DOM7.
Framework7 can also be used with Angular and React frameworks.
You can start creating apps once you know HTML, CSS and some basic JavaScript.
It supports faster development via Bower.
It is easy to develop apps for iOS and Android without learning it.
Disadvantages
Framework7 only supports platforms like iOS and Android.
The online community support for Framework7 framework is less compared to iOS and Andriod.
What Is Framework7 Environment?
You can download the Framework7 in two ways:
Download from Framework7 Github repository You can install the Framework7 by using Bower as shown below:
bower install framework7: After successful installation of Framework7, you need to follow the below steps to make use of Framework7 in your application:
Step 1: You need to install gulp-cli to build development and dist versions of Framework7 by using the below command:
npm install gulp-cli
The cli stands for Command Line Utility for Gulp.
Step 2: The Gulp must be installed globally by using the below command:
npm install --global gulp
Step 3: Next, install the NodeJS package manager which installs the node programs that makes easier to specify and link dependencies. The below command is used to install the npm:
npm install
Step 4: The development version of Framework7 can be build by using the below command:
npm build
Step 5: Once you build the development version of Framework7, start building app from dist/ folder by using the following command:
npm dist
Step 6: Keep your app folder in the server and run the following command for navigation between pages of your app.
gulp server
What Is Accordion In Framework7?
The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.
The below classes are used for accordion in the Framework7:
accordion-list: It is a optional class contains group of accordion items list.
accordion-item: It is a required class for single accordion item.
accordion-item-toggle: It is a required class used to expand accordion item content.
accordion-item-content: It is a required class used for hidden accordion item content.
accordion-item-expanded: It is a single expanded accordion item.
Accordion JavaScript API: JavaScript API methods are used to open and close accordion programmatically.
It contains following JavaScript API methods:
myApp.accordionOpen(item): Used to open accordion.
myApp.accordionClose(item): Used to close accordion.
myApp.accordionToggle(item): Used to toggle accordion.
All methods contains parameter called item which is HTML or string element of accordion-item.
What Are Framework7 Cards?
Cards contains organized information related a single subject like a photo, link, and text. The below table shows Framework7 card types:
Card HTML Layout: The basic card HTML layout uses card classes to arrange its items.
List View With Cards: You can use cards as list view elements by adding cards-list class to <div class="list-block">.
How To Use Native Page Transitions With Frameeork7?
Using the Cordova CLI:
cordova plugin add com.telerik.plugins.nativepagetransitions
Using PGB:
<plugin name="com.telerik.plugins.nativepagetransitions" source="npm" />
What Is Framework7 Search Bar?The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.
The below classes are used for accordion in the Framework7:
accordion-list: It is a optional class contains group of accordion items list.
accordion-item: It is a required class for single accordion item.
accordion-item-toggle: It is a required class used to expand accordion item content.
accordion-item-content: It is a required class used for hidden accordion item content.
accordion-item-expanded: It is a single expanded accordion item.
Accordion JavaScript API: JavaScript API methods are used to open and close accordion programmatically.
It contains following JavaScript API methods:
myApp.accordionOpen(item): Used to open accordion.
myApp.accordionClose(item): Used to close accordion.
myApp.accordionToggle(item): Used to toggle accordion.
All methods contains parameter called item which is HTML or string element of accordion-item.
What Are Framework7 Cards?
Cards contains organized information related a single subject like a photo, link, and text. The below table shows Framework7 card types:
Card HTML Layout: The basic card HTML layout uses card classes to arrange its items.
List View With Cards: You can use cards as list view elements by adding cards-list class to <div class="list-block">.
How To Use Native Page Transitions With Frameeork7?
Using the Cordova CLI:
cordova plugin add com.telerik.plugins.nativepagetransitions
Using PGB:
<plugin name="com.telerik.plugins.nativepagetransitions" source="npm" />
Framework 7 allows searching the elements by using the searchbar class.
Search Bar Parameters
Parameters & Description---Type Default
searchList--It searches the CSS selector or HTML element of the list.--string or HTML Element -
searchIn--You can search the list view elements of CSS selectors, also searches the elements by passing .item-title, .item-text classes.—string--'.item-title'
found---It searches the CSS selector or HTML element using "found" element. Further, it uses .searchbar-found element if there is no element specified.--string or HTML Element -
notfound--It searches the CSS selector or HTML element using "not-found" element. Further, it uses .searchbar-not-found element if there is no element specified.--string or HTML Element -
overlay--It searches the CSS selector or HTML element using "searchbar overlay" element and uses .searchbar-overlay element, if there is no element specified.--string or HTML Element -
ignore--You can ignore the CSS selector for items by using the searchbar.--string '.searchbar-ignore'
customSearch--When it is enabled, the searchbar will not search through any of list blocks which is specified by searchList and you will be allowed to use custom search functionality.—boolean--false
removeDiacritics--When searching for an element, remove the diacritics by enabling this parameter.—boolean--false
hideDividers---This parameter will hide item dividers and group title, if there are no items.—boolean--true
hideGroups--This parameter will hide the groups, if there are no items found in the list view groups. ---boolean---true
What Are Search Bar Properties?
Search Bar Properties
mySearchbar.params: Represents the initialized parameters passed with object.
mySearchbar.query: Searches the current query.
mySearchbar.searchList: Defines the search list block.
mySearchbar.container: Defines the search bar container with HTML element.
mySearchbar.input: Defines the search bar input with HTML element.
mySearchbar.active: It defines whether search bar is enabled or disabled.
What Is Layout Grid In Framework7?
Framework7 provides different types of grid types to place the content as per user need.
The layout grid provides different types of columns size.
What Are Overlays In Framework7?
Framework7 provides different types of overlays to work with the applications smoothly. Following table lists some of the Framework7 overlays:
Modal: Modal is a small window that display content from separate source without leaving the parent window.
Popup: Popup is a popup box which displays the content when user clicks on the element.
Popover: To manage the presentation of temporary content, the popover component can be used.
Action Sheet: The Action Sheet is used to present the user with a set of possibilities for how to handle a given task.
Login Screen: Overlay login screen is used for displaying login screen format which can be used in page or popup or as a standalone overlay.
Picker Modal: Picker modal is used to pick some custom content which is similar like calender picker.
What Are Preloaders In Framework7?
Preloader in Framework7 is made with Scalable Vector Graphic (SVG) and animated with CSS which makes it easily resizable. Preloader is available in two colors:
the default is light background
another one is dark background
You can use preloader class in your HTML as shown below:
Example: The below example demonstrates the use of preloader in the Framework7:
<!DOCTYPE html>
<html>
<head>
<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>Panel Events</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Framework7 Preloader</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block row">
<div class="col-25"><span class="preloader"></span><br>Default Preloader</div>
<div class="col-25 col-dark"><span class="preloader preloader-white"></span><br>White Preloader</div>
<div class="col-25"><span style="width:42px; height:42px" class="preloader"></span><br>Big Preloader</div>
<div class="col-25 col-dark"><span style="width:42px; height:42px" class="preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>
What Are Search Bar Methods?
Search Bar Methods:
mySearchbar.search(query); This method searches the passed query.
mySearchbar.enable(); It enables the search bar.
mySearchbar.disable(); It disables the search bar.
mySearchbar.clear(); You can clear the query and search results.
mySearchbar.destroy(); It destroy the search bar instance.
What Is Framework7 Status Bar?
The iOS 7+ allows you to build full screen apps which could create an issue when your status bar overlaps your app. Framework7 solves this problem by detecting whether your app is in full screen mode or not. If your app is in full screen mode then, the Framework7 will automatically adds with-statusbar-overlay class to <html> (or removes if app is not in full screen mode) and you need to add statusbar-overlay class in <body> as shown in below code:
<html class="with-statusbar-overlay">
...
<body>
<div class="statusbar-overlay"></div>
...
By default, <div> will always be hidden and fixed on top of your screen. It will only be visible when app is in full screen mode and with-statusbar-overlay class is added to <html>.
What Is Framework7 Side Panels?
The side panel moves to left or right side of the screen to display the content. Framework7 allows you to include up to 2 panels (right side panel and left side panel) to your app. You need to add panels in the beginning of the <body> and then choose opening effect by applying the below listed classes:
panel-reveal - This will moves out whole app's content.
panel-cover - This will make the panel to overlay on app's content.
For instance, the below code shows how to use above classes:
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class="panel-overlay"></div>
<!-- Left panel -->
<div class="panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class="panel panel-right panel-reveal">
panel's content
</div>
</body>
What Is Content Block In Framework7?
Content blocks can be used to add extra content with different format.
The progress bars can be used to show loading of assets or progress of a task to the users. You can specify the progress bar by using the progressbar class. When user doesn't know how long the loading process will be there for the request, you can use progressbar-infinite class.
What Are List Views In Framework7?
List views are powerful UI components that presents data in a scrollable list of multiple rows. The Framework7 provides different types of List View to work with your application. The following table lists some of the Framework7 List View:
List View: List views are powerful user interface components which presents data in a scrollable list containing multiple rows.
Contacts List: The contacts list is a type of list view which can be used to display the list of people contacts.
Media List View: The Media list view is used to display the complicated data structures like products, services, users information.
Swipeout: The swipeout allows you to reveal hidden menu actions by swiping over the list elements.
Sortable List: The sortable list is a type of list view which sorts the list view elements.
Virtual List: Virtual list a type of list view which includes lists of large number of data elements without dropping their performance.