Using Onsen UI with Meteor.js
Question
In trying to use Onsen UI together with Meteor.js and Cordova, onsen-css-components.css and onsenui.css were copied to client/css and onsenui.js to client/lib . Onsen UI elements were used in a Meteor template in app.html .
However no CSS styles seem to be applied to these ons-* elements, as shown in screen cap below. What additional steps are required to apply Onsen UI styles to the template?
app.html
<ons-page>
<ons-toolbar>
<div class="center">List With Header</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Android Versions</ons-list-header>
<ons-list-item modifier="chevron">KitKat</ons-list-item>
<ons-list-item modifier="chevron">Jelly Bean</ons-list-item>
<ons-list-item modifier="chevron">Honycomb</ons-list-item>
<ons-list-header>Mac OS X Versions</ons-list-header>
<ons-list-item modifier="chevron">Mavericks</ons-list-item>
<ons-list-item modifier="chevron">Mountain Lion</ons-list-item>
<ons-list-item modifier="chevron">Lion</ons-list-item>
<ons-list-item modifier="chevron">SnowLeopard</ons-list-item>
</ons-list>
</ons-page>
app.js
ons.bootstrap();
ons.ready(function() {
// Add another Onsen UI element
var content = document.getElementById("#my-content");
content.innerHTML="<ons-button>Another Button</ons-button>";
ons.compile(content);
});
Rendered Result
Javascript Console Errors
Uncaught ReferenceError: angular is not defined onsenui.js?6c0e6c9dd262aa6735d1d59f874924b40039dcde:3922
Uncaught ReferenceError: ons is not defined app.js?1177e75f0f0631724c9abb2b3ef5bb97373aca32:1
How can we use Onsen UI without the Angular dependency? Installed mrt:angular-stack on Meteor 0.9.2.1 and it seems that its not compatible with Meteor 0.9+
4 answers
solution1
1 2014-09-18 22:05:20
I was wondering about the same thing. Looks like it's super tied to Angular: https://github.com/OnsenUI/OnsenUI/issues/222
solution2
1 2014-09-24 02:08:45
For the time being, it's impossible to use OnsenUI tag without AngularJS. However, you can have OnsenUI style by using its CSS components which you can find here ( http://components.onsenui.io/ ).
solution3
1 2015-05-28 01:40:32
You'll have to add urigo:angular package to your meteor app. Check http://angular-meteor.com for more details.
solution4
0 2017-10-01 14:26:29
I came across this post as I also wanted to integrate OnsenUI for styling into Meteor.
I combined it with Blaze, by just getting the files the author above mentioned and copied where he described. Then added the corresponding class names from OnsenUI https://onsen.io/v2/api/css.html#button-category and it worked like a charm.
Eg, Blaze tutorial start page:
<head>
<title>testapp</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
{{> info}}
</body>
<template name="hello">
<button class="button">Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="info">
<ul class="list">
<li class="list-header">
Learn Meteor!
</li>
<li class="list-item">
<div class="list-item__center"><a
href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a>
</div>
</li>
<li class="list-item">
<div class="list-item__center"><a
href="http://guide.meteor.com" target="_blank">Follow the Guide</a>
</div>
</li>
<li class="list-item">
<div class="list-item__center"><a
href="https://docs.meteor.com" target="_blank">Read the Docs</a></div>
</li>
<li class="list-item">
<div class="list-item__center"><a
href="https://docs.meteor.com" target="_blank">Discussions</a></div>
</li>
</ul>
</template>
Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.