Components

Components of BoltUI

BoltUI uses native HTML Components which are directly converted to HTML Elements when described. That means every HTML Component is valid in Bolt too! But how will we translate HTML to our components?

Let's see an example below:

<p>Hello World</p>

Now this is a HTML component, and how would we describe it in Bolt? Well here it is

p("Hello World")

As you can see, a HTML component is just a function in bolt, that means every html component will have it's own function, like

p("I am a pragraph")
h1("I am a large heading")
h2("I am smaller than large heading")
div("I am a container")
section("I am a section")

But in HTML, you can nest components, like

<div>
    <p>Name: Bolt</p>
    <p>Work: Javascript Framework</p>
</div>

So how we can do it in Bolt? Well all the function you just saw as components also accept multiple components as their child elements, i.e

div(
    p("Name: Bolt"),
    p("Work: Javascript Framework")
)

Note: the html tag <var> clashes with the keyword var in javascipt, hence if you want to use the <var> tag, call the variable() function instead

It's that simple! You can now create layouts entierely on this architecture, and the intellisense that your IDE will provide, it will be even faster and you will have amazing developer experience!