Links

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 1yr ago