This is my 3rd write up on dev.to site. This article shows proof-of-concept joining Mithril JS and Quasar CSS.
Quasar CSS
Quasar is an excellent framework for web and mobile apps. It consists of two parts: JS (depends on VueJS) and CSS.
CSS part of Quasar defines large number of classes (css rules) and practically covers everything we need to write nice and user-friendly apps.
Mithril JS
Mithril is another JS framework for building web and mobile apps.
As mentioned on it's site:
Mithril.js is a modern client-side JavaScript framework for building Single Page Applications. It's small (< 10kb gzip), fast and provides routing and XHR utilities out of the box.
Mithril's components, definition
As with other frameworks we can define components. Combining Mithril JS code (component) with Quasar CSS we are able to use them together.
For example:
- qslider
// mithril component qslider
var qslider = {
view: function (vnode) {
return m("input[type=range]", {oninput: vnode.attrs.oninput, min: vnode.attrs.min, max: vnode.attrs.max, step: vnode.attrs.step, value: vnode.attrs.value})
}
};
- qbtn
// mithril component qbtn
var qbtn = {
view: function(vnode) {
return m("button", {class: "q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase btn-roll q-btn__content text-center items-center q-anchor--skip justify-center row q-focus-helper " + vnode.attrs.class, onclick: vnode.attrs.onclick, disabled: vnode.attrs.disabled}, vnode.attrs.title)
}
};
As you can see we define components with Quasar's CSS classes and we can even pass attributes.
A few notes:
Pay attention to class attribute...
{class: "class1 class2 class3 " + vnode.attrs.class}
... values end with space; this way we can append another classes via vnode.attrs.class
Function called on click event is passed as another attribute
onclick: vnode.attrs.onclick
Using those attributes we can modify and define behaviour of components.
Mithril's components, use
An app written with Mithril JS is a view function which returns virtual DOM. Uses special Mithril's m() function.
We can use our new components as they were normal HTML tags.
m(qslider, {oninput: function(e){count2 = e.target.value}, min: -20, max: 20, step: step, value: count2})
m(qbtn, {onclick: function(){count1 = 0}, disabled: count1 == 0, class: "full-width bg-primary text-white", title: "reset value 1"})
Real example
As I said before, this is proof-of-concept only. I have written an small demonstration of this two components, here is a very small code at my replit.
Improvements?
There is a fully functional solution (link above) but... maybe I'm complicated and awkward so your comments are welcome!
Top comments (0)