DMXzone Visual App Designer for Framework 7 Manual

Prev Index Next

Advanced: Using Navbars and Toolbar in Visual App Designer

 In this tutorial we will show you how to use Framework 7 nav bars and toolbar in your app.

*You can also check out the video.

How to do it

1. In our previous tutorials we've inserted Framework 7 default app layout on our page. We also added an additional cached page. The default Framework 7 app layout contains a nav bar. Select it in order to see its properties (1). Here, you can customize the nav bar appearance - and colors. Also you can show or hide the bottom border of the nav bar (2). We leave these settings to their default values.

2. Select navbar content in the app structure tree (1). The nav bar has 3 main parts: left, center and right. Each of the nav bar contents that you add can be assigned to a specific page. If you do not assign the nav bar content to a page, then it will be displayed across all of the app pages. We want to display this nav bar content only to the index page so we open the page menu and select index (2).

Note: Each part may contain any HTML content but it is recommended to use them in the following way:

The left part is designed to be used with "back link", icons or with single text link.

The center part is used to display page title or tab links.

The right part is for the same as the left part.

3. Now, let's add another navbar content that will be displayed only on our cached page named page 1. Right-click on the navbars in the app structure (1) and select add navbar content (2).

4. The new navbar content has been successfully added. Now let's assign it to page 1. Select the navbar content (1) and from the page menu select page 1 (2).

5. Now, let's add a back link, to the page 1 navbar. Right click the left part of the navbar content (1) and select add link (2).

6. We change the default link text to: back (1). From the action menu select back (2).

7. Now, let's add the page title into the center part of the navbar content. Select center (1) and enter the page title into the text field (2). We leave the right section empty, as we do not need it right now.

8. You can test the back button, by clicking it in Dreamweaver Live View.

9. The default Framework 7 app layout contains a toolbar. Right click the toolbar (1) and select add link (2).

Note: The toolbar is a fixed area at the bottom of a screen that contains navigation elements. It does not have any parts, just plain links inside. By default, all of the Toolbar elements are equally spaced along toolbar - they have equal space between each other.

10. You can see that our link has been successfully added. You can apply some action to it or you can link it to a specific page. We do not want our toolbar to be displayed on page 1. So, we select page 1 (1) and check no toolbar checkbox (1), located in the properties panel.  This option hides the toolbar on the selected page. That's how easy it is to manage the navbars, navbar content and toolbar, using DMXzone Visual App Designer.

Prev Index Next