Comment on page
Layout
Nectar is a Single Page Application (SPA). Therefore, the entry point to every browser request is
index.html
In an SPA, only a single web page is loaded, called the app shell, and the consecutive pages are loaded inside this app shell using XMLHttpRequest and Fetch, without loading whole new pages from the server.
In Nectar, this app shell layout is defined inside
/partials/app.html
Nectar provides two main types of navigation layouts which are widely used in apps — Single View Layout and Tab View Layout.
In Single View Layout, the app is mainly navigated using a off-canvas sidebar. Optionally, a bottom tabbar at
/home/
can also be present for secondary navigation.In Tab View Layout, the app is mainly navigated using a bottom tabbar. Optionally, a sidebar can also be present for secondary navigation.
The Single View Layout is based on Framework7's Single View, while the Tab View Layout is based on Framework7's Multiple Views.
The major difference between Single View Layout and Tab View Layout is that,
In Single View Layout, you can access any inner route directly from the browser address bar, for example, https://nectar.website/demo/about and this will open the About screen.
But if you access this in Tab View Layout, then this will always open the first route (/) instead.
You can configure and set up your app layout using the configuration variables present inside
/assets/custom/js/config.js
By default, the app is set to Single View Layout for PWAs and Tab View Layout for Cordova.
- 1.Open
/assets/custom/js/config.js
- 2.Inside
window.config.layout = {
- 3.Set
default: 'singleView'
- 4.Inside
singleView
object, you can enable or disable thesidebar
andtabbar
, by setting theenabled
value totrue
orfalse
respectively.
The layout for Sidebar Menu is defined inside
/partials/sidebar.html
You can change the sidebar menu items as per your requirements.
This Sidebar Menu is common for both Single View Layout and Tab View Layout.
The layout for Tabbar Menu is defined inside
/partials/tabbar.html
You can change the tabbar menu items as per your requirements.
Once you have changed the tabbar menu items, you will also need to change routes for them.
- 1.Open
/assets/custom/js/routes.js
- 2.Inside
if (window.config.layout.default == 'singleView' && window.config.layout.singleView.tabbar.enabled) {
- 3.Change the
path
parameter value according to the changes you made in/partials/tabbar.html
- 1.Open
/assets/custom/js/config.js
- 2.Inside
window.config.layout = {
- 3.Set
default: 'tabView'
- 4.Inside
tabView
object, you can enable or disable thesidebar
, by setting theenabled
value totrue
orfalse
respectively.
The layout for Sidebar Menu is defined inside
/partials/sidebar.html
You can change the sidebar menu items as per your requirements.
This Sidebar Menu is common for both Single View Layout and Tab View Layout.
- 1.Open
/partials/app.html
- 2.Inside
<template>
${$f7.config.layout.default == 'tabView' && $h`
, define the tabbar menu items. - 3.Inside
<script>
if ($f7.config.layout.default == 'tabView') {
, change theurl
parameters for each view, as per the tabbar menu items you have defined in the above step.
You can control the Sidebar by using following functions:
// Show Sidebar
app.sidebar.show();
// Hide Sidebar
app.sidebar.hide();
// Toggle Sidebar
app.sidebar.toggle();
You can control the Tabbar by using following functions:
// Show Tabbar
app.tabbar.show();
// Hide Tabbar
app.tabbar.hide();
Last modified 9mo ago