Bottom Tab Demo App
iOS
More iOS devicesAndroid
More Android devices/* Bottom Tab Menu Configuration */
{
"tabSelectionConfig": [
{
"id": "1",
"regex": "https://gonativeio.github.io/gonative-demos/about.*"
},
{
"id": "2",
"regex": "https://gonativeio.github.io/gonative-demos/contact.*"
}
],
"tabMenus": [
{
"items": [
{
"subLinks": [],
"label": "Home",
"url": "https://gonativeio.github.io/gonative-demos/sidebar-tab-demo.html",
"icon": "fas fa-home"
},
{
"subLinks": [],
"label": "Contact Us",
"url": "https://gonativeio.github.io/gonative-demos/contact.html",
"icon": "fas fa-envelope-o"
}
],
"id": "1"
},
{
"items": [
{
"subLinks": [],
"label": "Home",
"url": "https://gonativeio.github.io/gonative-demos/sidebar-tab-demo.html",
"icon": "fas fa-home"
},
{
"subLinks": [],
"label": "About Us",
"url": "https://gonativeio.github.io/gonative-demos/about.html",
"icon": "fas fa-user"
}
],
"id": "2"
}
],
"active": true
}
/* Set Bottom Tab Menu Items */
median.tabNavigation.setTabs({
"enabled": true, // set enabled to false to hide the tabs
"items": [{
"icon": "fas fa-cloud", //optional
"label": "Tab 1",
"url": "javascript:alert('You selected tab 1')"
}, {
"icon": "fas fa-globe", //optional
"label": "Tab 2",
"url": "javascript:alert('You selected tab 2')"
}, {
"icon": "fas fa-users", //optional
"label": "Tab 3",
"url": "javascript:alert('You selected tab 3')"
}]
});
/* Select Bottom Tab Menu Item */
if (navigator.userAgent.indexOf('median') > -1) {
median.tabNavigation.selectTab(1);
// the tabs are 0-indexed
// i.e. median.tabNavigation.selectTab(1) will select the second tab
}
Updated about 2 months ago