Framework7 Interview Question

---

1) What is Framework7?

Framework7 is a free and open-source mobile HTML framework. It is used to develop hybrid mobile apps or web apps for iOS and Android devices.

2) In which year Framework7 was introduced?

Framework7 was introduced in 2014. Its latest version 1.4.2 was released on February 2016 licensed under MIT.

3) What is the reason behind Framework7 popularity?

Framework7 is popular because of the following reasons:

• It facilitates you to develop apps for iOS and Android both.
• The learning curve for Framework7 is very easy.
• Framework7 has many pre-styled widgets/components.
• It has built-in helper libraries.

4) What are the main features of Framework7?

Main features of Framework7:

• Framework7 is an open source framework so it is free to use.
• Framework7 has easy and familiar jQuery syntax so you can learn it very easily.
• Framework7 has built-in FastClick library so it is very easy to control click delay for touch UI's.
• Framework7 has built-in grid system layout for arranging your elements responsively.
• Framework7 dynamically loads page from template via flexible router API.

5) What are the advantages of Framework7?

Advantages of Framework7:

• Framework7 is not dependent on any third party library.
• Framework7 has its own custom DOM7 for DOM manipulation.
• Framework7 can also be used with Angular and React frameworks.
• Framework7 facilitates you to create 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.

6) What are the disadvantages of Framework7?

Disadvantages of Framework7:

• Framework7 only supports platforms like iOS and Android.
• The online community support for Framework7 is not as broad as iOS and Andriod.

7) What are the several layouts for Framework7?

Framework7 provides different types of layouts for your application. It supports mainly four types of Navbar/Toolbar layouts:

• Static Layout: The static layout is most 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: Fixed layout uses its own navbar and toolbar which can be visible on screen and cannot be scrollable on page.
• Through Layout: In through layout, the navbar and toolbar appears fixed for all pages within single view.
• Mixed Layout: This layout is a mix of all above layouts in the single view.

8) What are Navbars in Framework7?

There are three parts in navbars which may contain any HTML content, but it should be used in the following way:

• 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.

9) What is the use of different navbars in Framework7?

Following is a list of different navbars with details:

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.

10) What is toolbars in Framework7?

Toolbars are used to provide easy access to other pages by using navigation elements at the bottom of the screen.

11) What are the different Framework7 toolbars to use?

You can use toolbars in two ways as specified in the table.

• Hide Toolbar: If you want to hide the toolbar automatically when you load the pages, use the no-toolbar class to loaded page.
• Bottom Toolbar: Place the toolbar at the bottom of the page by using the toolbar-bottom class.

12) What are the different methods used with toolbar?

Following is a list of methods 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.

13) What is Search Bar in Framework 7?

SearchBar is obtained in Framework 7 by using the SearchBar class. It is used for searching the elements.

14) What are the different SearchBar properties in framework 7?

Following is a list of different SearchBar 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.

15) What are different SerachBar methods?

Following is a list of SearchBar methods:

• mySearchbar.search(query): This method is used to search the passed query.
• mySearchbar.enable(): It is used to enable the search bar.
• mySearchbar.disable(): It is used to disable the search bar.
• mySearchbar.clear(): It facilitates you can clear the query and search results.
• mySearchbar.destroy(): It is used to destroy the search bar instance.

16) What do you mean by Content Block in Framework 7?

In Framework 7, Content Blocks make you able to add extra content with different format.

17) What is Layout grid in Framework 7?

Framework7 provides different types of grid types to place the content according to user needs.

The layout grid is used to provide different types of columns size.

18) What do you know by Overlays in Framework 7?

In Framework7, overlays are used to work with applications smoothly. Following is a list of some Overlays in Framework 7:

• Modal: Modal is a small window which is used to display content from separate sources without leaving the parent window.
• Popup: Popup is a popup box which is used to display 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 calendar picker.

19) What is Progress Bar in Framework 7?

The progress bars can be used to show loading of assets or progress of a task to the users. Progress bar can be specified 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.

20) What Is Accordion In Framework7?

In Framework 7, 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.

21) What are the different classes used for accordion in Framework 7?

Following classes are used in Framework 7 accordion:

• accordion-list: It is an 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.

22) What are cards in Framework 7?

Framework 7 cards contain organized information related to a single subject like photo, link, and text.

Following is a list of Framework 7 card type:

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">.

23) How can you use Native Page transitions with Framework 7?

There are two ways to use Native Page Transitions with Framework 7:

By Using Cordova CLI:

cordova plugin add com.telerik.plugins.nativepagetransitions

Using PGB:

<plugin name="com.telerik.plugins.nativepagetransitions" source="npm" />