Layouts and Page

This page discusses special types of views that do not necessary map directly to an HTML tag, however, they provide an abstraction for common use cases.

Page

Page is a special view that maps to an HTML body. Normally, it is the root view of your application. In Kunafa, Page is a singleton.

Calling page { } DSL function will clear the HTML body. As such, it should be only called at the beginning of the application. This is useful if you want to add a loading indicator in your index.html and it will automatically be cleared with the page is called.

Page and Server Side Rendering

You do not need to call page { } when using Server Side Rendering as the HTML body is generated at the server. Instead, you hydrate the views. See server side rendering for more details.

Linear layouts

Linear layouts allow you to stack elements in a horizontal or vertical line using horizontalLayout {} and verticalLayout {} respectively. For example,

verticalLayout {
    textView {
        text = "Line 1"
    }
    textView {
        text = "Line 2"
    }
    textView {
        text = "Line 3"
    }
}

Linear layouts use flexbox. Therefore, you can use flexbox properties to customize the layout. For example

verticalLayout {
    style {  
        justifyContent = JustifyContent.End  
        alignSelf = Alignment.Center  
        alignItems = Alignment.End  
    }
    textView {
        text = "Line 1"
    }
    textView {
        text = "Line 2"
    }
    textView {
        text = "Line 3"
    }
}

Scroll layouts

Scroll layouts are layouts that are scrollable. You can use horizontalScrollLayout and verticalScrollLayout. They also use flexbox so you can use all flexbox properties.