Component basics

FuncUI offers a Component inspired by ReactJS. Components allow you to organize views into reusable pieces. 
There are two ways of creating a component. 
Component (fun ctx -> ...)
Creating a component using the regular constructor of the Component class. Component inherits from Border and therefor can be used like any other Avalonia control.
// create a Component that can be directly used in a Avalonia app
let component: Component = Component (fun ctx -> 
    TextBlock.create [
        TextBlock.text "Hello World!"
    ]
)
​
// use component as main view of an app
type MainWindow() as this =
    inherit HostWindow()
    do
        this.Content <- component
​
// embedd component in avalonia app
let control: ContentControl = ..
control.Content <- component
// Creating a component using the View DSL.
// The resulting IView can be used inside other components and with the View DSL.
​
Component.create ("key", fun ctx -> ...)
Declaratlvely describes a component. Can be embedded in other views as this returns an IView
let greetingView (): IView = 
    Component.create ("greetingView", fun ctx -> 
        TextBlock.create [
            TextBlock.text "Hello World!"
        ]
    )
​
let view (): IView = 
    Component.create ("mainView", fun ctx -> 
        DockPanel.create [
            DockPanel.children [
                // use other component
                greetingView ()
            ]
        ]
    )

Last modified 1mo ago