OnsenUI is a very nice librarie when it comes to develop UI for mobiles.
Using it with MVU is a pleasant experience.
Le's start with a little demo, fetching users from DummyJSON
Don't be afraid, we will use the browser only.
Let's start by adding the neeeded scripts in our html page :
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/artydev/mvu@1.1/dist/mvu.umd.js"></script>
That's all we need to code our demo.
Now let's us declare some functions which will help us to create some elements, for that we will use the m function
const {m, dom, udom} = MVU
// standart element
const div = m("div");
const br = m("br");
// OnsenUI elements makers
const page = m("ons-page");
const toolbar = m("ons-toolbar");
const list = m("ons-list")
const listHeader = m("ons-list-header");
const item = m("ons-list-item")
const button = m("ons-button");
div("Hy Devto");
br();
let btn = button("I am an OnsenUI button");
br();
btn.onclick = () => alert('Hy Devs');
You can see a demo here : mdemo
Before going further, a word about the functions generated with m.
Let's take for example the div function and notes it's versatility (divdemo):
We can now build our little application :
const {m, dom, udom} = MVU
// standart element
const div = m("div");
// OnsenUI elements makers
const page = m("ons-page");
const toolbar = m("ons-toolbar");
const list = m("ons-list")
const listHeader = m("ons-list-header");
const item = m("ons-list-item")
const button = m("ons-button");
let items = (users) =>
users.map((u) => {
let user = item(`
<div style="width:150px">
<img src=${u.image} width="64px" />${u.firstName}
</div>
<div></div>
`);
dom(user.querySelector("div"))
button("hy").onclick = () => ons.notification.alert(u.firstName);
udom()
return user
})
function Toolbar () {
let tb = dom(toolbar())
let btnmenu = div(`
<ons-toolbar-button>
<ons-icon icon="ion-ios-menu, material:md-menu"></ons-icon>
</ons-toolbar-button>
`)
udom()
btnmenu.style="position:absolute;right:10px;top:8px"
return tb
}
let App = (users = {}) =>
page([
Toolbar(),
list(items(users))
])
// Entry point
fetch('https://dummyjson.com/users')
.then(res => res.json())
.then(data => App(data.users));
document.addEventListener('init', function(event) {
var page = event.target;
page.querySelector('ons-toolbar .center').innerHTML = 'MVU & OnsenUI';
});
You can see the result here : FetchUser
Remember to read the previous posts on MVU serie.
Thank you for reading.
Top comments (0)