Category: framework7

Framework7 – Useful Resources ”; Previous Next The following resources contain additional information on Framework7. Please use them to get more in-depth knowledge on this. Useful Video Courses .NET Framework Online Training Featured 8 Lectures 1 hours Tutorialspoint More Detail Learn Entity Framework Core 2.0 (EFC2) using ASP.Net Core 34 Lectures 3.5 hours Nilay Mehta More Detail Using Microsoft Bot Framework v3, LUIS, Cognitive Services 54 Lectures 4.5 hours Nilay Mehta More Detail Entity Framework : A Comprehensive Course 22 Lectures 2.5 hours TELCOMA Global More Detail Protractor Angular framework from scratch using java & nodeJS 19 Lectures 3 hours Lucky Trainings More Detail Java Spring Framework 5 – Build A Web App Step By Step Best Seller 122 Lectures 11 hours Damian Jedrzejak More Detail Print Page Previous Next Advertisements ”;

Framework7 – Templates Overview ”; Previous Next Description Template7 is a lightweight, mobile-first JavaScript engine, which represents Ajax and dynamic pages as Template7 templates with specified context and does not require any additional scripts. Template7 is associated with Framework7 as a default, lightweight template engine, which works faster for applications. Performance The process of compiling string to JS function is the slowest segment of template7. Hence, you do not need to compile the template multiple times, only once is sufficient. //Here initialize the app var myApp = new Framework7(); // After initializing compile templates on app var searchTemplate = $(”script#search-template”).html(); var compiledSearchTemplate = Template7.compile(searchTemplate); var listTemplate = $(”script#list-template”).html(); var compiledListTemplate = Template7.compile(listTemplate); // Execute the compiled templates with required context using onPageInit() method myApp.onPageInit(”search”, function (page) { // Execute the compiled templates with required content var html = compiledSearchTemplate({/*…some data…*/}); // Do stuff with html }); Template7 is a lightweight template engine used as a standalone library without Framework7. The Template7 files can be installed using two ways − You can download from Template7 github repository. Or You can install it using the following command via Bower − bower install template7 Print Page Previous Next Advertisements ”;

Framework7 – Autocomplete ”; Previous Next Description Autocomplete is a Framework7”s mobile friendly and touch optimized component, which can be as dropdown or in standalone way. You can create and initialize Autocomplete instance by using the JavaScript method − myApp.autocomplete(parameters) Where parameters are required objects used to initialize the Autocomplete instance. Autocomplete Parameters The following table lists the available Autocomplete parameters in Framework7 − S.No Parameters & Description Type Default 1 openIn It defines how to open an Autocomplete which could be used as dropdown, popup or page. string page 2 source It uses autocomplete instance, search query and renders function to pass matched items with array. function (autocomplete, query, render) – 3 valueProperty It specifies the item value of matched item object”s key. string id 4 limit It displays the limited number of items in autocomplete per query. number – 5 preloader Preloader can be used to specify autocomplete layout by setting it to true. boolean false 6 preloaderColor It specifies the preloader color. By default, the color is “black”. string – 7 value Defines the array with default selected values. array – 8 textProperty It specifies the item value of matched item object”s key, which can be used as a title of displayed options. string text Standalone Autocomplete Parameters The following table lists the available Standalone Autocomplete parameters in Framework7 − S.No Parameters & Description Type Default 1 opener It is string or HTML element parameter, which will open the standalone autocomplete page. string or HTMLElement – 2 popupCloseText It is used to close the autocomplete popup. string ”Close” 3 backText It provides the back link when autocomplete is opened as page. string ”Back” 4 pageTitle It specifies the autocomplete page title. string – 5 searchbarPlaceholderText It specifies the search bar placeholder text. string ”Search” 6 searchbarCancelText It defines the search bar cancel button text. string ”cancel” 7 notFoundText It displays the text when there is no matched element found. string ”Nothing found” 8 multiple It allows to select multiple selection by setting it to true. boolean false 9 navbarTheme It specifies the color theme for navbar. string – 10 backOnSelect When the user picks value, the autocomplete will be closed by setting it to true. boolean false 11 formTheme It specifies the color theme for form. string – Dropdown Autocomplete Parameters The following table lists the available Dropdown Autocomplete parameters in Framework7 − S.No Parameters & Description Type Default 1 input It is string or HTML element used for text input. string or HTMLElement – 2 dropdownPlaceholderText It specifies the dropdown placeholder text. string – 3 updateInputValueOnSelect You can update the input value on select by setting it to true. boolean true 4 expandInput You can expand the text input in List View to make full screen wide during dropdown visible by setting item-input it to true. boolean false Autocomplete Callbacks Functions The below table lists available Dropdown Autocomplete parameters in Framework7 − S.No Parameters & Description Type Default 1 onChange Whenever the autocomplete value is changed, this callback function will be executed. function (autocomplete, value) – 2 onOpen Whenever autocomplete is opened, this callback function will be executed. function (autocomplete) – 3 onClose Whenever autocomplete is closed, this callback function will be executed. function (autocomplete) – Autocomplete Templates The following table lists the available Dropdown Autocomplete parameters in Framework7 − S.No Parameters & Description Type Default 1 navbarTemplate It is standalone autocomplete navbar template. string – 2 itemTemplate It is standalone template7 form item. string – 3 dropdownTemplate It is template7 dropdown template. string – 4 dropdownItemTemplate It is template7 dropdown list item. string – 5 dropdownPlaceholderTemplate It is template7 dropdown placeholder item. string – Default templates Following are the default template code snippets for the above defined templates parameters − navbarTemplate <div class = “navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}”> <div class = “navbar-inner”> <div class = “left sliding”> {{#if material}} <a href = “#” class = “link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only”> <i class = “icon icon-back”></i> </a> {{else}} <a href = “#” class = “link {{#if inPopup}}close-popup{{else}}back{{/if}}”> <i class = “icon icon-back”></i> {{#if inPopup}} <span>{{popupCloseText}}</span> {{else}} <span>{{backText}}</span> {{/if}} </a> {{/if}} </div> <div class = “center sliding”>{{pageTitle}}</div> {{#if preloader}} <div class = “right”> <div class = “autocomplete-preloader preloader {{#if preloaderColor}} preloader-{{preloaderColor}} {{/if}}”> </div> </div> {{/if}} </div> </div> itemTemplate <li> <label class = “label-{{inputType}} item-content”> <input type = “{{inputType}}” name = “{{inputName}}” value = “{{value}}” {{#if selected}}checked{{/if}}> {{#if material}} <div class = “item-media”> <i class = “icon icon-form-{{inputType}}”></i> </div> <div class = “item-inner”> <div class = “item-title”>{{text}}</div> </div> {{else}} {{#if checkbox}} <div class = “item-media”> <i class = “icon icon-form-checkbox”></i> </div> {{/if}} <div class = “item-inner”> <div class = “item-title”>{{text}}</div> </div> {{/if}} </label> </li> dropdownTemplate <div class = “autocomplete-dropdown”> <div class = “autocomplete-dropdown-inner”> <div class = “list-block”> <ul></ul> </div> </div> {{#if preloader}} <div class = “autocomplete-preloader preloader {{#if preloaderColor}} preloader-{{preloaderColor}} {{/if}}”> {{#if material}} {{materialPreloaderHtml}} {{/if}} </div> {{/if}} </div> dropdownItemTemplate <li> <label class = “{{#unless placeholder}}label-radio{{/unless}} item-content” data-value = “{{value}}”> <div class = “item-inner”> <div class = “item-title”>{{text}}</div> </div> </label> </li> dropdownPlaceholderTemplate <li class = “autocomplete-dropdown-placeholder”> <div class = “item-content”> <div class = “item-inner”> <div class = “item-title”>{{text}}</div> </div> </label> </li> Autocomplete Methods The following table specifies Autocomplete methods available in Framework7 − S.No Methods & Description 1 myAutocomplete.params Defines the initialization parameters that are passes with object. 2 myAutocomplete.value It defines the array with selected values. 3 myAutocomplete.opened It opens the Autocomplete if it is set to true. 4 myAutocomplete.dropdown It specifies an instance of Autocomplete dropdown. 5 myAutocomplete.popup It specifies an instance of Autocomplete popup. 6 myAutocomplete.page It specifies an instance of Autocomplete page. 7 myAutocomplete.pageData It defines Autocomplete page data. 8 myAutocomplete.searchbar It defines Autocomplete searchbar instance. Autocomplete Properties The following table specifies Autocomplete methods available in Framework7 − S.No Properties & Description 1 myAutocomplete.open() It opens the Autocomplete, which could be used as dropdown, popup or page. 2 myAutocomplete.close() It closes the Autocomplete. 3 myAutocomplete.showPreloader() It shows the Autocomplete preloader. 4 myAutocomplete.hidePreloader() It hides the Autocomplete preloader. 5 myAutocomplete.destroy() It ruins the Autocomplete

Framework7 – Chips ”; Previous Next Description Chip is a small block of entity, which can contain a photo, small string of title, and short information. Chips HTML Layout The following code shows the basic chip HTML layout used in Framework7 − <div class = “chip”> <div class = “chip-media”> <img src = “http://lorempixel.com/100/100/people/9/”> </div> <div class = “chip-label”>Jane Doe</div> <a href = “#” class = “chip-delete”></a> </div> The above HTML layout contains many classes as listed below − chips − It is the chip container. chip-media − This is the chip media element that can contain images, avatar or icon. It is optional. card-label − It is the chip text label. card-delete − It is the optional delete icon link of a chip. Example The following example represents the entities such as albums, card elements etc. along with a photo and brief information − <!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>Chips HTML Layout</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” /> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css” /> <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css” /> </head> <body> <div class = “views”> <div class = “view view-main”> <div class = “pages”> <div class = “page navbar-fixed”> <div class = “navbar”> <div class = “navbar-inner”> <div class = “center”>Chips HTML Layout</div> </div> </div> <div class = “page-content”> <div class = “content-block-title”>Chips With Text</div> <div class = “content-block”> <div class = “chip”> <div class = “chip-label”>Chip one</div> </div> <div class = “chip”> <div class = “chip-label”>Chip two</div> </div> </div> <div class = “content-block-title”>Chips with icons</div> <div class = “content-block”> <div class = “chip”> <div class = “chip-media bg-blue”><i class = “icon icon-form-calendar”></i></div> <div class = “chip-label”>Set Date</div> </div> <div class = “chip”> <div class = “chip-media bg-purple”><i class = “icon icon-form-email”></i></div> <div class = “chip-label”>Sent Mail</div> </div> </div> <div class = “content-block-title”>Contact Chips</div> <div class = “content-block”> <div class = “chip”> <div class = “chip-media”><img src = “/framework7/images/pic.jpg”></div> <div class = “chip-label”>James Willsmith</div> </div> <div class = “chip”> <div class = “chip-media”><img src = “/framework7/images/pic2.jpg”></div> <div class = “chip-label”>Sunil Narayan</div> </div> <div class = “chip”> <div class = “chip-media bg-pink”>R</div> <div class = “chip-label”>Raghav</div> </div> <div class = “chip”> <div class = “chip-media bg-teal”>S</div> <div class = “chip-label”>Sharma</div> </div> <div class = “chip”> <div class = “chip-media bg-red”>Z</div> <div class = “chip-label”>Zien</div> </div> </div> <div class = “content-block-title”>Deletable Chips</div> <div class = “content-block”> <div class = “chip”> <div class = “chip-label”>Chip one</div> <a href = “#” class = “chip-delete”></a> </div> <div class = “chip”> <div class = “chip-media bg-teal”>S</div> <div class = “chip-label”>Sharma</div> <a href = “#” class = “chip-delete”></a> </div> <div class = “chip”> <div class = “chip-media bg-purple”><i class = “icon icon-form-email”></i></div> <div class = “chip-label”>Sent</div> <a href = “#” class = “chip-delete”></a> </div> <div class = “chip”> <div class = “chip-media”><img src = “/framework7/images/pic.jpg”></div> <div class = “chip-label”>James Willsmith</div> <a href = “#” class = “chip-delete”></a> </div> <div class = “chip”> <div class = “chip-label”>Chip two</div> <a href = “#” class = “chip-delete”></a> </div> <div class = “chip”> <div class = “chip-media bg-green”>R</div> <div class = “chip-label”>Raghav</div> <a href = “#” class = “chip-delete”></a> </div> </div> </div> </div> </div> </div> </div> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> <style> </style> <script> var myApp = new Framework7 ({ material: true }); var $$ = Dom7; $$(”.chip-delete”).on(”click”, function (e) { e.preventDefault(); var chip = $$(this).parents(”.chip”); myApp.confirm(”Do you want to delete this Chip?”, function () { chip.remove(); }); }); </script> </body> </html> Output Let us carry out the following steps to see how the above given code works − Save the above given HTML code as cards_html_layout.html file in your server root folder. Open this HTML file as http://localhost/cards_html_layout.html and the output is displayed as shown below. The example represents the complex entities in small blocks such as albums, card elements, posted image, which contains photo, title string and brief information. Print Page Previous Next Advertisements ”;

Framework7 – Status Bar ”; Previous Next Description 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 the following 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 the app is in full screen mode and with-statusbar-overlay class is added to <html>. Example The following example demonstrates the use of status bar 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>My App</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 = “statusbar-overlay”></div> <div class = “panel-overlay”></div> <div class = “panel panel-right panel-reveal”> <div class = “content-block”> <p>Contents goes here…</p> </div> </div> <div class = “views”> <div class = “view view-main”> <div class = “navbar”> <div class = “navbar-inner”> <div class = “center sliding”>My App</div> <div class = “right”> <a href = “#” class = “link icon-only open-panel”><i class = “icon icon-bars”></i></a> </div> </div> </div> <div class = “pages navbar-through toolbar-through”> <div data-page = “index” class = “page”> <div class = “page-content”> <p>This is simple application…</p> <p>page contents goes here!!!</p> </div> </div> </div> <div class = “toolbar”> <div class = “toolbar-inner”> <a href = “#” class = “link”>First Link</a> <a href = “#” class = “link”>Second Link</a> </div> </div> </div> </div> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> <script> // here initialize the app var myApp = new Framework7(); // If your using custom DOM library, then save it to $$ variable var $$ = Dom7; // Add the view var mainView = myApp.addView(”.view-main”, { // enable the dynamic navbar for this view: dynamicNavbar: true }); //use the ”pageInit” event handler for all pages $$(document).on(”pageInit”, function (e) { //get page data from event data var page = e.detail.page; }) </script> </body> </html> Output Let us carry out the following steps to see how the above given code works − Save the above given html code as status_bar.html file in your server root folder. Open this HTML file as http://localhost/status_bar.html and the output is displayed as shown below. The example shows the use of the statusbar-overlay, which allows you to build full screen apps when your status bar overlaps the app. Print Page Previous Next Advertisements ”;

Framework7 – Active State ”; Previous Next Description When you tap the links and buttons, they are highlighted. This is done by active state in Framework7. It behaves like a native app, not like a web app.. It has a built-in Fast clicks library and it should be enabled. The active-state class is the same as the CSS :active selector. Active state is enabled by adding watch-active-state class to <html> element. The following code is used for active state in CSS style − /* Usual state */ .my-button { color: red; } /* Active/tapped state */ .my-button.active-state { color: blue; } The following code shows the fallback compatibility, when Active state or Fast clicks is disabled − /* Usual state */ .my-button { color: red; } /* Active/tapped state */ .my-button.active-state { color: blue; } /* Fallback, when active state is disabled */ html:not(.watch-active-state) .my-button:active { color: blue; } Print Page Previous Next Advertisements ”;

Framework7 – Quick Guide ”; Previous Next Framework7 – Overview 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. Framework7 was introduced in the year 2014. The latest version 1.4.2 was released in February 2016 licensed under MIT. Why 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. Features 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 pages from templates via flexible router api. 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. Framework7 – Environment In this chapter, we will discuss about how to install and setup Framework7. You can download the Framework7 in two ways − Download from Framework7 Github repository You can install the Framework7, using Bower as shown below − bower install framework7 After successful installation of Framework7, you need to follow the below given 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 following 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 following command. npm install –global gulp Step 3 − Next, install the NodeJS package manager, which installs the node programs that makes it easier to specify and link dependencies. The following command is used to install the npm. npm install Step 4 − The development version of Framework7 can be built by using the following command. npm build Step 5 − Once you build the development version of Framework7, start building the 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 Download Framework7 Library from CDNs A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if a visitor to your webpage has already downloaded a copy of Framework7 from the same CDN, it won”t have to be re-downloaded. You can include the following CDN files into the HTML document. The following CDNs are used in an iOS App layout − <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” /> It is used to include Framework7 iOS CSS Library to your application. <link rel = “stylesheet” href = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” /> It is used to include Framework7 iOS related color styles to your application. The following CDNs are used in Android/Material App Layout − <script src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> It is used to include Framework7 JS library to your application. <script src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css”></script> It is used to include Framework7 Material styling to your application. We are using the CDN versions of the library throughout this tutorial. We use AMPPS(AMPPS is a WAMP, MAMP and LAMP stack of Apache, MySQL, MongoDB, PHP, Perl & Python) server to execute all our examples. Example The following example demonstrates the use of simple application in the Framework7, which will display the alert box with the customized message when you click on the navigation bar. <!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>My App</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> //you can control the background color of the Status bar <div class = “statusbar-overlay”></div> <div class = “panel-overlay”></div> <div class = “panel panel-right panel-reveal”> <div class = “content-block”> <p>Contents goes here…</p> </div> </div> <div class = “views”> <div class = “view view-main”> <div class = “navbar”> <div class = “navbar-inner”> <div class = “center sliding”>My App</div> <div class = “right”> <a href = “#” class = “link icon-only open-panel”> <i class = “icon icon-bars”></i> </a> </div> </div> </div> <div class = “pages navbar-through toolbar-through”> <div data-page = “index” class = “page”> <div class = “page-content”> <p>This is simple application…</p> <div class = “list-block”> <ul> <li> <a href = “envirmnt_about.html” class = “”> <div class = “item-content”> <div class = “item-inner”> <div class = “item-title”>Blog</div> </div> </div> </a> </li> </ul> </div> </div> </div> </div> <div class = “toolbar”> <div class = “toolbar-inner”> <a href = “#” class = “link”>First Link</a> <a href = “#” class = “link”>Second Link</a> </div> </div> </div> </div> <script type = “text/javascript” src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script> <script> // here initialize the app var myApp = new Framework7(); // If your using custom DOM library, then save it to $$ variable var $$ = Dom7; // Add the view var mainView = myApp.addView(”.view-main”, { // enable the dynamic navbar for this view: dynamicNavbar: true }); //use the ”pageInit” event handler for all pages $$(document).on(”pageInit”, function (e) { //get page data from event data var page =

Framework7 – Color Themes ”; Previous Next Description Framework7 provides different color themes for your applications. A color theme provides different types of theme colors used to work with the applications smoothly as specified in the table below − S.No Theme Type & Description 1 iOS Theme Colors You can use 10 different default iOS color themes for the application. 2 Material Theme Colors Framework7 provides 22 different default material color themes for the application. Applying Color Themes Framework7 allows you to apply color themes on different elements such as page, list-block, navbar, buttons-row etc by using the theme-[color] class to the parent element. Example … </body> <div class = “page theme-gray”> … </div> <div class = “list-block theme-blue”> … </div> <div class = “navbar theme-green”> … </div> <div class = “buttons-row theme-red”> … </div> Layout Themes You can use default layout theme for your application by using two themes white and dark. The themes can be applied by using the layout-[theme] class to the parent element. Example … </body> <div class = “navbar layout-white”> … </div> <div class = “buttons-row layout-dark”> … </div> Helper Classes Framework7 provides additional helper classes, which can be used outside or without themes as listed below − color-[color] − It can be used to change text color of block or color of button, link, icon etc. bg-[color] − It sets the predefined background color on the block or element. border-[color] − It sets the predefined border color on the block or element. Print Page Previous Next Advertisements ”;

Framework7 – Notifications ”; Previous Next Description Notifications are used to show the required messages, which appear like Push (or Local) iOS notifications. The following table demonstrates the use of notifications in details − S.No Notifications usage & Description 1 Notifications JavaScript API The notifications can also be added or closed with JavaScript by using the related app methods. 2 Notifications Layout Framework7 notifications will be added by using JavaScript. 3 Example iOS Framework7 allows you to use different types of notifications in your iOS layout. 4 Example Material Framework7 notifications can also be used in material layout. Print Page Previous Next Advertisements ”;

Framework7 – Calendar ”; Previous Next Description The Calendar component allows you to handle dates easily and can be used as an inline or as an overlay component. The overlay calendar will be converted to popover on tablets automatically. Calendar can be created and initialized only by using JavaScript. You need to use the related App”s method as shown below − myApp.calendar(parameters) − This method returns initialized calendar instance. It accepts an object as paramaters. The following table shows the calendar usage in Framework7 − S.No Calendar Usage & Description 1 Calendar Parameters Framework7 provides a list of parameters, which are used with calendar. 2 Calendar Methods & Properties You will get an initialized instance variable to use the calendar methods and properties, once you initialize the calendar. 3 Access to Calendar”s Instance It is possible to access the calendar instance from its HTML container when you initialize the calendar as inline. Print Page Previous Next Advertisements ”;