Hello,
so this is something that may be result https://codepen.io/symorp/pen/bGbWEeW but I wanna pages in tab bar create dynamically by some conditions. Currently, I am using jQuery but in the future, we wanna migrate to Vue so is here a way how to render tabs in tab bar with jQuery or Vue?
Symorp
@Symorp
Posts made by Symorp
-
RE: Dynamically create tabbar in page of navigator
-
Dynamically create tabbar in page of navigator
Hello,
i am trying to generate tabbar on page, based on some data from API.So I created this:
let data = []; let onsEle = document.createElement('ons-tab'); onsEle.setAttribute('id', 'rdMainTab'); onsEle.setAttribute('page', 'rdMain.html'); onsEle.setAttribute('label', 'Main'); onsEle.setAttribute('icon', 'ion-home, material:md-home'); onsEle.setAttribute('active', ''); data.push(onsEle); if (showData1) { let onsMapEle = document.createElement('ons-tab'); onsMapEle.setAttribute('id', 'rdMapTab'); onsMapEle.setAttribute('page', 'rdDetailMap.html'); onsMapEle.setAttribute('label', 'Map'); onsMapEle.setAttribute('icon', 'ion-home, material:md-home'); data.push(onsMapEle); } if (showData2) { let onsInvEle = document.createElement('ons-tab'); onsInvEle.setAttribute('id', 'rdInvoiceTab'); onsInvEle.setAttribute('page', 'rdInvoiceTab.html'); onsInvEle.setAttribute('label', 'Invoice'); onsInvEle.setAttribute('icon', 'ion-home, material:md-home'); data.push(onsInvEle); } if (showData3) { let onsTriEle = document.createElement('ons-tab'); onsTriEle.setAttribute('id', 'rdTripsTab'); onsTriEle.setAttribute('page', 'rdTripsTab.html'); onsTriEle.setAttribute('label', 'Trips'); onsTriEle.setAttribute('icon', 'ion-home, material:md-home'); data.push(onsTriEle); } let wrap = document.createElement('ons-tabbar'); wrap.setAttribute('swipeable', ''); wrap.setAttribute('position', 'auto'); wrap.setAttribute('id', 'reservation-detail-tabbar'); wrap.setAttribute('class', 'x-margin-top'); let l = data.length; for (let a = 0; a < l; a++) { wrap.appendChild(data[a]); } $page.find('#tabbarPlaceholder')[0].appendChild(wrap);
The tabbar renders ok. But, when I click at another tab it is showing this error:
Uncaught (in promise) TypeError: page._show is not a function at HTMLElement._onPostChange (index.js:264) at swiper.js:343
And when I try to go back it is showing this:
index.js:281 Uncaught (in promise) TypeError: prevTab.pageElement._hide is not a function at HTMLElement._onPreChange (index.js:281) at Swiper._changeTo (swiper.js:335) at Swiper.setActiveIndex (swiper.js:183) at index.js:459
Can you please tell me how to generate tabbar dynamicaly? Or where I made mistake? Many thanks and have a nice day.
-
Onsen with Vue and TypeScript?
Hello I am wondering how to use Onsen UI with VueJS and TypeScript, I tried your bundle https://github.com/OnsenUI/vue-cordova-webpack, but It is not prepared for use with TypeScript.
Do you have some tips how to change your boilerplate to work with TypeScript?
EDIT: I forgot, I wanna to build cordova app. And I don’t know how to use this plugin (vue-cli-plugin-cordova) which is refferenced in you doc. But why it is creating folder src-cordova, when I already have src folder?
-
RE: Monaca Build - Cocoapod settings for Google maps cordova plugin
Here is error from logs:
- postBuild - Remove DerivedData files... Remove IB Support files... Change Xcode Version to 10.1 Build Error: Error: Sandbox Exec Error: [ Ignoring configuration file '=NONE' because it could not be loaded. Reason: File could not be parsed due to preprocessing errors: The file “=NONE” couldn’t be opened because there is no such file. (/tmp/monaca/5cee380de78885ef23242c67/project/platforms/ios/=NONE)Error: ENOENT: no such file or directory, open '/private/tmp/monaca/5cee380de78885ef23242c67/project/platforms/ios/XXX.xcworkspace/project.pbxproj' ]
-
Monaca Build - Cocoapod settings for Google maps cordova plugin
Hello,
in my project i am using cordova-plugin-googlemaps for rendering google maps
https://github.com/mapsplugin/cordova-plugin-googlemapsAnd this supporting plugin, that should install googlemaps-sdk for iOS
https://github.com/mapsplugin/cordova-plugin-googlemaps-sdkWhen I am building app for Android, everything is Ok. But when I am building for iOS I am getting error, or Google maps did not install so I can’t use them.
I was lookig how to solve this. I thing it have something with CocoaPods or some dependencies when building app. I wrote to developer. He told that I must set
cordova-cli@9
andcordova-ios@8
. But I don’ know how to setup this when building app on Monaca.Can you please help me?
Many Thanks