Basic UI Components

Kunafa provides components for all basic views such as textView, ImageView, ButtonView, Table, Form, etc. These also include Layout Views and Scroll Views such as verticalLayout, horizontalLayout, verticalScollLayout, horizontalScrollLayout.

UI elements are assigned to the getView() function of a component class. Views are inserted into a tree structure of repetitive parent and child views.

class HelloWorldComponent() : Conponent(){
  override fun View?.getView() : View = verticalLayout {
    textView {
      text = "Hello World"
    }
    textView{
      text = "Hello World Again"
    }    
  }
}

Mount Component

A component can be mounted as UI element in the middle of a Layout view.

val component = HelloWorldComponent()
verticalLayout {
  mount(component)
  
}

RuleSet

Each Kunafa UI Component takes a style function to which a RuleSet can be assigned where CSS properties are specified. The isVisible and onClick properties can also be assigned to any view. 

private val buttonStyle1 = classRuleSet {
        width = matchParent
        height = 50.px
        border = "2px solid #eaeaea"
        color = Color.black
        borderRadius = 7.px
        fontSize = 12.px
}

private fun View?.textToggle(){
	var toggle = false
	horizontalLayout{
    	style{
        	width = matchParent
        	height = wrapContent
        	justifyContent = JustifyContent.Center
        }
        textView{
        	text = "Hi"
            isVisible = toggle
        }
        buttonView{
        	text = "Go"
            onClick = {
            	toggle = !toggle
            }
            addRuleSet(buttonStyle)
        }
    }
}