Skip to content
This repository has been archived by the owner on Jan 1, 2023. It is now read-only.

An alternative view rendering API for Fabulous (Elmish Xamarin.Forms) that is easy to use and simple to read, inspired by Elmish on the web.

License

Notifications You must be signed in to change notification settings

Zaid-Ajaj/fabulous-simple-elements

Repository files navigation

Fabulous.SimpleElements Nuget Build Status

ARCHIVED: Latest API from Fabulous v2+ makes this obsolete!

An alternative view rendering API for Fabulous that is easy to use and simple to read, inspired by Elmish on the web.

Install from Nuget

dotnet add package Fabulous.SimpleElements	

Usage

The library aims to unify both optional arguments and fluent extension methods for View elements into a list of attributes. This allows for easy API discoverability, just "dotting" through the element module to see what attributes you can set on the element.

let view (model: State) dispatch =
    ContentPage.contentPage [
        ContentPage.Title "Page Title"
        ContentPage.Content <|
            StackLayout.stackLayout [
                StackLayout.Padding 20.0 
                StackLayout.VerticalLayout LayoutOptions.Center
                StackLayout.Children [ 
                    Label.label [ 
                        Label.Text "Congrats, you have won!"; 
                        Label.HorizontalTextAlignment TextAlignment.Center
                        Label.MarginLeft 30.0
                        Label.MarginRight 30.0
                        Label.FontSize FontSize.Large 
                    ]
                    Button.button [ 
                        Button.Text "Play Again"
                        Button.OnClick (fun _ -> dispatch StartNewGame) 
                    ]
                ]
            ]
    ]

Backwards compatible with existing DSL

This DSL is built on-top of the existing one in the core of Fabulous library which means if something isn't implemented here, that use can simply fallback to using the original DSL in a mix-and-match fashion:

let view (model: State) dispatch =
    View.ContentPage(
        title = "Page Title"
        ,content = StackLayout.stackLayout [ 
            StackLayout.Children [
                View.Button(text="Click me")
            ]
    ])

Extension methods are included with attributes

Instead of

View.Button(text="hello")
    .GridColumn(1)
    .GridRow(1)

you write

Button.button [
  Button.Text "Hello"
  Button.GridRow 1
  Button.GridColumn 1
]

Running the samples

Each sample has it's own solution, open any of the samples in Visual Studio or Visual Studio for Mac, select your preferred project to start the app, either <AppName>.Android or <AppName>.iOS and run the project.

Fifteen Puzzle Sample

fifteen-puzzle

LoginFlow sample

login-flow

Counter Sample

Counter

About

An alternative view rendering API for Fabulous (Elmish Xamarin.Forms) that is easy to use and simple to read, inspired by Elmish on the web.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages