Is there a working example available for a tabbar?
(where each tab has its own Component/Page)
I’ve used Angular 1 , React-native, ReactJS.
Vue.js syntax is silky compared to those. Love it!
Is there a working example available for a tabbar?
(where each tab has its own Component/Page)
I’ve used Angular 1 , React-native, ReactJS.
Vue.js syntax is silky compared to those. Love it!
I can’t get this set up correctly.
Toolbar (above tabbar) and Footer (beneath tabbar) stay hidden under the Tabbar pages.
Is there a way to fix this?
render() {
return (
<Page>
<Toolbar inline>
<div className="left"><BackButton>Back</BackButton></div>
<div className="center">{'Skill' + this.props.skill.skillNr}</div>
</Toolbar>
<Tabbar
index={this.state.index}
position='top'
onPreChange={({index}) => this.setState({index})}
renderTabs={this.renderTabs.bind(this)}
/>
<Footer />
</Page>
);
}
I don’t understand why this.props.skill.skillNr is not rendering in OnsenUI.
There seems to be some kind of timing problem.
I’m using phonegap-template-react-hot-loader as a template for my project.
Reactjs constructor with console.log(…
console.log in the browser
this.props.skill.skillNr referenced in <Page><Toolbar…
result in the app
Ah, found it. isSwipeable={false} makes the scrollbar work perfectly.
return (
<Splitter>
<SplitterSide
isSwipeable={false}>
Thanks, unordered list works well except not with the Splitter (sidebar navigation) as the outer component of the app.
Is there a way to disable the Splitter on certain pages?
Or should I set the Navigator (stacked navigation) as outer component and then add the splitter on pages where I need them?
(index.html)
<Splitter>
<SplitterSide
side='left'
collapse={true}
isOpen={this.state.isOpen}
onClose={this.hide.bind(this)}
isSwipeable={true}>
<Page>
Menu content
</Page>
</SplitterSide>
<SplitterContent>
<Navigator initialRoute={{component: Skills}}
renderPage={this.renderPage}/>
</SplitterContent>
</Splitter>
I understand that using React with the online tool is not possible.
I’ve set up a blank project with Local CLI but what I still don’t understand is how to add js libraries.
Normally I would config webpack with babel to compile react, es6, css, ui libraries etc., but Monaca is already running a webpack instance. How do I solve this?
I’m trying to build a project from scratch (no framework) with a blank template.
Then I’m attaching JS Components React and material-ui.
Should this work out of the box?
I don’t see how the components loader is going to kick in.
Should I add something my self?
Are there any examples how to build custom projects with various JS components?
generated index.html
imported react as a JSComponent
I see you can add css components with the Monaca online tool.
However my project is set up with Reactjs. which excludes using the online tool.
I can only use the Monaca CLI for builds etc., but I can’t see how to add/remove JS/CSS components.
@beebase I did a new install. Seems to work now.
monaca preview: All icons display fine.
monaca debug: All icons appear as placeholders with a cross.
Any ideas?
OnsenUI 2 with Reactjs