

How to Create a Tab UI with Riot 2.0 - robertwpearce00
http://www.robertwpearce.com/blog/riotjs-example/

======
bshimmin
Aside from the usual unpleasantness of muddling together views and logic (and
welcome back `onclick`, how I've missed you...), I find the idea of the
"parent" scope rather troubling. If you have something nested inside a tab,
let's say a link, what is its parent - an individual tab, or the whole "tabs"
component?

~~~
tipiirai
Since Riot is a "React- like 2.5KB UI library" the main purpose is to "muddle
together" related layout and logic.

------
tipiirai
Instead of

    
    
       class={ tabItem: true, is_active: something() }
    

you can just write

    
    
       class="tabItem { is_active: something() }"

~~~
robertwpearce00
oh, that's awesome. will update

------
SimeVidas
Custom elements must contain a hyphen:
[http://w3c.github.io/webcomponents/spec/custom/#dfn-
custom-e...](http://w3c.github.io/webcomponents/spec/custom/#dfn-custom-
element). Just `<tabs>` is not allowed.

~~~
maemre
According to [1], Riot developers are aware of that and chose to support
custom tags without a dash:

> W3C specification demands you use a dash in the tag name. Instead of
> <person> you must write <my-person>. Obey this rule if you care about W3C.
> Both work fine.

However using hyphens to be standards-compliant and future compatible would be
better.

[1]: [https://muut.com/riotjs/faq.html](https://muut.com/riotjs/faq.html)

------
quest88
Of course we'd still have posts in 2015 about how to make tabs.

