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?
- 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.
- It supports faster development via Bower.
- It is easy to develop apps for iOS and Android without learning it.
- 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.
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.
It includes its own navbar and toolbar which can be visible on screen and cannot be scrollable on page.
The navbar and toolbar appears fixed for all pages within single view.
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.
||It represents the initialized parameters passed with object.
||It searches the current query.
||It defines the search list block
||It defines the search bar container with HTML element
||It definethe search bar input with HTML element
||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:
<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">
<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">
<div class="view view-main">
<div data-page="home" class="page navbar-fixed">
<div class="center">Framework7 Preloader</div>
<div class="content-block row">
<div class="col-25"><span class="preloader"></span><br>Default Preloader</div>
<div class="col-25 col-dark"><span
<div class="col-25"><span style="width:42px; height:42px"
<div class="col-25 col-dark"><span style="width:42px; height:42px"
varmyApp = new Framework7();
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
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.
||It is powerful user interface component that presents data in a scrollable list containing multiple rows.
||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.
||It sorts the list view elements.
||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
||It is an optional class that contains group of accordion items list.
||It is a required class for single accordion item.
||It is a required class used to expand accordion item content.
||It is a required class used for hidden accordion item content.
||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
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 materialRipple
There are following Ripple Elements.
- .label-checkbox etc.