Skip to content

fsprojects/Avalonia.FuncUI

master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 

Stand With Ukraine

Avalonia FuncUI

Avalonia FuncUI

Develop cross-platform MVU GUI Applications using F# and AvaloniaUI!

GitHub top language GitHub repo size


(Application was created using Avalonia.FuncUI!)

About

This library allows you to write cross-platform GUI Applications entirely in F# - No XAML, but either using React/Sutil inspired components or a declarative Elm-like DSL with MVU (Model-View-Update) architecture support and Elmish bindings built-in.

Getting started

Contributing

Please contribute to this library through issue reports, pull requests, code reviews, documentation, and discussion.

Examples

Example using components

A simple counter made with the component library:

type Components =
    static member Counter () =
        Component (fun ctx ->
            let state = ctx.useState 0
    
            DockPanel.create [
                DockPanel.children [
                    Button.create [
                        Button.onClick (fun _ -> state.Set(state.Current - 1))
                        Button.content "click to decrement"
                    ]
                    Button.create [
                        Button.onClick (fun _ -> state.Set(state.Current + 1))
                        Button.content "click to increment"
                    ]
                    TextBlock.create [
                        TextBlock.dock Dock.Top
                        TextBlock.text (string state.Current)
                    ]
                ]
            ]
        )

This and more examples using the component library in the Components Examples folder.

Example using Elmish

The same counter as above but using the Avalonia.FuncUI.Elmish package:

module Counter =

    type CounterState = {
        count : int
    }

    let init = {
        count = 0
    }

    type Msg =
    | Increment
    | Decrement

    let update (msg: Msg) (state: CounterState) : CounterState =
        match msg with
        | Increment -> { state with count =  state.count + 1 }
        | Decrement -> { state with count =  state.count - 1 }
    
    let view (state: CounterState) (dispatch): IView =
        DockPanel.create [
            DockPanel.children [
                Button.create [
                    Button.onClick (fun _ -> dispatch Increment)
                    Button.content "click to increment"
                ]
                Button.create [
                    Button.onClick (fun _ -> dispatch Decrement)
                    Button.content "click to decrement" 
                ]
                TextBlock.create [
                    TextBlock.dock Dock.Top
                    TextBlock.text (sprintf "the count is %i" state.count)
                ]
            ]
        ]    

This and more examples using Elmish in the Elmish Examples folder

Maintainer(s)

The current co-maintainers of Avalonia.FuncUI are

  • @JordanMarr
  • @sleepyfran

with advice from the project originator @JaggerJo.

The default maintainer account for projects under "fsprojects" is @fsprojectsgit - F# Community Project Incubation Space (repo management)