{"id":13709729,"url":"https://github.com/Zaid-Ajaj/fabulous-simple-elements","last_synced_at":"2025-05-06T18:32:43.999Z","repository":{"id":40876162,"uuid":"148056918","full_name":"Zaid-Ajaj/fabulous-simple-elements","owner":"Zaid-Ajaj","description":"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. ","archived":true,"fork":false,"pushed_at":"2023-01-01T19:51:17.000Z","size":6814,"stargazers_count":46,"open_issues_count":4,"forks_count":5,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-04T17:07:43.507Z","etag":null,"topics":["android","fabulous","fsharp","ios","xamarin","xamarin-forms"],"latest_commit_sha":null,"homepage":"","language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zaid-Ajaj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-09T19:06:12.000Z","updated_at":"2023-01-07T14:19:18.000Z","dependencies_parsed_at":"2023-02-01T00:45:59.163Z","dependency_job_id":null,"html_url":"https://github.com/Zaid-Ajaj/fabulous-simple-elements","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2Ffabulous-simple-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2Ffabulous-simple-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2Ffabulous-simple-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zaid-Ajaj%2Ffabulous-simple-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zaid-Ajaj","download_url":"https://codeload.github.com/Zaid-Ajaj/fabulous-simple-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224521348,"owners_count":17325218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","fabulous","fsharp","ios","xamarin","xamarin-forms"],"created_at":"2024-08-02T23:00:44.654Z","updated_at":"2024-11-13T20:30:20.679Z","avatar_url":"https://github.com/Zaid-Ajaj.png","language":"F#","funding_links":[],"categories":["Elmish","Libraries"],"sub_categories":[],"readme":"# Fabulous.SimpleElements [![Nuget](https://img.shields.io/nuget/v/Fabulous.SimpleElements.svg?colorB=green)](https://www.nuget.org/packages/Fabulous.SimpleElements)   [![Build Status](https://travis-ci.org/Zaid-Ajaj/fabulous-simple-elements.svg?branch=master)](https://travis-ci.org/Zaid-Ajaj/fabulous-simple-elements)\n\n\n# ARCHIVED: Latest API from [Fabulous v2+](https://github.com/fsprojects/Fabulous) makes this obsolete!\n\nAn 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. \n\n### Install from Nuget\n```\ndotnet add package Fabulous.SimpleElements\t\n```\n### Usage\nThe 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. \n```fs\nlet view (model: State) dispatch =\n    ContentPage.contentPage [\n        ContentPage.Title \"Page Title\"\n        ContentPage.Content \u003c|\n            StackLayout.stackLayout [\n                StackLayout.Padding 20.0 \n                StackLayout.VerticalLayout LayoutOptions.Center\n                StackLayout.Children [ \n                    Label.label [ \n                        Label.Text \"Congrats, you have won!\"; \n                        Label.HorizontalTextAlignment TextAlignment.Center\n                        Label.MarginLeft 30.0\n                        Label.MarginRight 30.0\n                        Label.FontSize FontSize.Large \n                    ]\n                    Button.button [ \n                        Button.Text \"Play Again\"\n                        Button.OnClick (fun _ -\u003e dispatch StartNewGame) \n                    ]\n                ]\n            ]\n    ]\n```\n### Backwards compatible with existing DSL \nThis 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:\n```fs\nlet view (model: State) dispatch =\n    View.ContentPage(\n        title = \"Page Title\"\n        ,content = StackLayout.stackLayout [ \n            StackLayout.Children [\n                View.Button(text=\"Click me\")\n            ]\n    ])\n```\n### Extension methods are included with attributes \nInstead of\n```fs\nView.Button(text=\"hello\")\n    .GridColumn(1)\n    .GridRow(1)\n```\nyou write\n```fs\nButton.button [\n  Button.Text \"Hello\"\n  Button.GridRow 1\n  Button.GridColumn 1\n]\n```\n# Running the samples\nEach 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 `\u003cAppName\u003e.Android` or `\u003cAppName\u003e.iOS` and run the project. \n\n### Fifteen Puzzle Sample\n![fifteen-puzzle](assets/fifteen-puzzle.gif)\n\n### LoginFlow sample \n![login-flow](assets/login.gif)\n\n### Counter Sample \n![Counter](assets/counter.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZaid-Ajaj%2Ffabulous-simple-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FZaid-Ajaj%2Ffabulous-simple-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZaid-Ajaj%2Ffabulous-simple-elements/lists"}