Elements - metincetin/Karbid GitHub Wiki

Creating Elements

Elements are defined with @ prefix.

@{
}

This will create an element. By default, the tag is div

The class name and id are specified similiarly to css

@tag.class.name#id{
}

You can also predefine attributes inside brackets with some javascript code

@input[type="number",value=4+4]{
} 

Created elements will be stored inside karbid.elements object. You can access them by karbid.elements.elementId

Child Elements

Elements can be created inside other elements writing them inside the element.

@#parent{
    @#child{
        @#child2{
        }
    }
}

Inline elements

You can specify parent elements inline with > operator

@#parent>button#child{
    text:"Hello"
}

@#topmost>#parent>button{
    text:"Hello"
}

Properties

@#element{
    propertyName:propertyValue
}

These are the available properties:

html Sets the innerHTML of the element

text Sets the innerHTML of the element (equivalent of html)

width Sets the width of the element

height Sets the height of the element

style Sets the style of the element. Requires css code

stylejs Sets the style of the element. Requires json

style.styleProperty Sets the specific style property of the element.

background-color Sets the background color

border Sets the border

placeholder Sets the placeholder

type Sets the type

attr-attrName Sets the attribute

ev-eventName Adds event listener. Requires javascript code.

click Adds event listener for click. Equivalent of ev-click. Requires javascript code

ìnput Adds event listener for input. Equivalent of ev-input. Requires javascript code

Events are written inside double brackets.

@{
    ev-eventName:{{
        //javascript code goes here
    }}
    style:{
        //css code goes here
    }
}

Example

@button{
    html:"Click me"
    width:"100%"
    style:{
        background-color:blue;
        color:white;
    }
    click:{{
        alert("Hello world!");
    }}
}