This repository has been archived on 2022-08-19. You can view files and clone it, but cannot push or open issues or pull requests.
hydrogen-web/doc/UI/render-dom-elements.md
2021-10-01 13:26:03 +02:00

1.3 KiB

tldr; Use tag from ui/general/html.js to quickly create DOM elements.

Syntax


The general syntax is as follows:

tag.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]);

tag_name can be any one of the following:

    br, a, ol, ul, li, div, h1, h2, h3, h4, h5, h6,
    p, strong, em, span, img, section, main, article, aside,
    pre, button, time, input, textarea, label, form, progress, output, video

eg: Here is an example HTML segment followed with the code to create it in Hydrogen.

<section class="main-section">
    <h1>Demo</h1>
    <button class="btn_cool">Click me</button>
</section>
tag.section({className: "main-section"},[
    tag.h1("Demo"), 
    tag.button({className:"btn_cool"}, "Click me")
    ]);

Note: In views based on TemplateView, you will see t used instead of tag.
t is is TemplateBuilder object passed to the render function in TemplateView. Although syntactically similar, they are not functionally equivalent.
Primarily t supports bindings and event handlers while tag does not.

    // The onClick here wont work!!
    tag.button({className:"awesome-btn", onClick: () => this.foo()});

    render(t, vm){
        // The onClick works here.
        t.button({className:"awesome-btn", onClick: () => this.foo()});
    }