Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Zaid-Ajaj/fabulous-simple-elements
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.
https://github.com/Zaid-Ajaj/fabulous-simple-elements
android fabulous fsharp ios xamarin xamarin-forms
Last synced: 29 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/Zaid-Ajaj/fabulous-simple-elements
- Owner: Zaid-Ajaj
- License: mit
- Archived: true
- Created: 2018-09-09T19:06:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-01T19:51:17.000Z (almost 2 years ago)
- Last Synced: 2024-11-04T17:07:43.507Z (about 1 month ago)
- Topics: android, fabulous, fsharp, ios, xamarin, xamarin-forms
- Language: F#
- Homepage:
- Size: 6.5 MB
- Stars: 46
- Watchers: 10
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-Fabulous - fabulous-simple-elements - Alternative DSL for constructing view elements, inspired by Elmish on the web and compatible with existing `View` API. The repository includes these samples: (Libraries)
- awesome-xamarin-forms - Fabulous.SimpleElements ★47
README
# Fabulous.SimpleElements [](https://www.nuget.org/packages/Fabulous.SimpleElements) [](https://travis-ci.org/Zaid-Ajaj/fabulous-simple-elements)
# ARCHIVED: Latest API from [Fabulous v2+](https://github.com/fsprojects/Fabulous) makes this obsolete!
An alternative view rendering API for [Fabulous](https://github.com/fsprojects/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.
```fs
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:
```fs
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
```fs
View.Button(text="hello")
.GridColumn(1)
.GridRow(1)
```
you write
```fs
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 `.Android` or `.iOS` and run the project.
### Fifteen Puzzle Sample
### LoginFlow sample
### Counter Sample
