1) What is Framework7?
Framework7 is an open source mobile HTML framework. It is used todevelop hybrid mobile apps for iOS and Android devices.
2) Why, framework7 is popular?
There are various reasons to use framework7 that are listed below:
- 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.
3) What are the features of framework7?
There are various features of framewrork7:
- It is an open source framework.
- It has easy and familiar jQuery syntax to get started without any delay.
- It has built-in grid system layout for arranging our elements responsively.
- It dynamically loads page from template via flexible router API.
4) What are the advantages and disadvantagesof Framework7?
Advantages:
- It is not dependent on any third party library. It has its own custom DOM7.
- It can also be used with Angular and React frameworks.
- It can also be used with Angular and React frameworks.
- We 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:
- It supports only iOS and Android platform.
- The online community support for Framework7 framework is less compared to iOS and Android.
5) What are the layouts of Framework7?
Framework7 provides various types oflayouts for our application that are given below.
Static Layout: It is often used layout type and includes navbar and toolbar which can be scrollable page content and each page contains its own navbar and toolbar.
Fixed Layout: It includes its own navbar and toolbar which can be visible on screen and cannot be scrollable on page.
Through Layout: The navbar and toolbar appears fixed for all pages within single view.
Mixed Layout: it is used to mix the different types of layouts in the single view.
6) What are the properties search bar provide?
The following table contains search bar properties.
| Searchbar Properties |
Description |
| mySearchbar.params |
It represents the initialized parameters passed with object. |
| mySearchbar.query |
It searches the current query. |
| mySearchbar.searchList |
It defines the search list block |
| mySearchbar.container |
It defines the search bar container with HTML element |
| mySearchbar.input |
It definethe search bar input with HTML element |
| mySearchbar.active |
It defines whether search bar is enabled or disabled. |
7) What arepreloaders in Framework7?
In Framework7, preloadersare created with SVG (Scalable Vector Graphic) and animated with CSS which makes it easily resizable. It is available in two colors:
- The defaultcolor is light background
- The second one is dark background
Wecan use preloader class in our HTML:
Example
<!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="preloaderpreloader-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="preloaderpreloader-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>
varmyApp = new Framework7();
</script>
</body>
</html>
8) What is content block in Framework7?
The content block is a block that can be used to add extra content with different format.
9) What is progress bar in Framework7?
The progress bars can be used to show loading of assets or progress of a task. We can implement the progress bar by using the
progressbar class.
10) Explain the types of ListViews in Framework7?
The List Views are UI components that present data in a scrollable list of multiple rows. It alsoprovides different types ofList Views to work with our application.
The following table contains different types of List Views.
| List Views |
Descriptions |
| List Views |
It is powerful user interface component that presents data in a scrollable list containing multiple rows. |
| Contacts List |
It is used to display the list of people contacts. |
| Media List View |
It is used to display the complicated data structures like products, services and users information. |
| Sortable List |
It sorts the list view elements. |
| Virtual List |
It includes lists of large number of data elements without dropping their performance |
11) What is Accordion in Framework7?
In Framework7, Accordion is a graphical control element that displays as a stacked list of items.
Framework7provides following Accordions classes.
| Accordion list class |
Description |
| accordion-list |
It is an optional class that contains group of accordion items list. |
| accordion-item |
It is a required class for single accordion item. |
| accordion-item-toggle/td> |
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. |
12) What are Cards in Framework7?
In Framework7, Cardsare used to contain organized information relatedto data like: photo, link, and text.
There are various types of Cardsin framework7.
- Card HTML Layout: It uses card classes to arrange its items.
- List View With Cards: We can use cards as list view elements by adding cards-list class to <div class="list-block">.
13) What are Chips and its HTML Layout example?
Chipsare a small block of entity that can contain a photo, string of title and short information.
Example Framework7 Chip
<divclassdivclass="chip">
<divclassdivclass="chip-media">
<imgsrcimgsrc="http://lorempixel.com/100/100/people/9/">
</div>
<divclassdivclass="chip-label">Jane Doe</div>
<ahrefahref="#"class="chip-delete"></a>
</div>
14) What is hairline in Framework7?
Hairline is a class. It is used to add 1px border around the images by using the border class. It contains the following rules:
- :after - This pseudo element is used for bottom and right hairlines.
- :before - This pseudo element is used for top and left hairlines.
15) What is Touch Ripple in framework7?
Touch Ripple is an effect. It is supported only in Framework7 material theme. By default, it is enabled in material theme and we can disable it by setting the
materialRippleparameteras
false.
There are following Ripple Elements.
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox etc.