Github GitHub - davedawkins/Feliz.Engine.Bulma: An F# implementation of Bulma la...
source link: https://github.com/davedawkins/Feliz.Engine.Bulma
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
Feliz.Engine.Bulma
An F# implementation of Bulma layered on top of Feliz.Engine, based on the work of Roman Provazník in Feliz.Bulma.
Comparison with Feliz.Bulma / I'm just looking for Bulma for Feliz
Feliz.Bulma is implemented on top of Feliz, a DOM DSL for the React framework. If your project uses Feliz, Feliz.Bulma is what you need.
Feliz.Engine.Bulma is implemented on top of Feliz.Engine, an abstract Feliz-like DSL which can be implemented for any DOM-builder backend, client-side or server-side.
This means that given an implementation of Feliz.Engine for a particular framework, Feliz.Engine.Bulma gives you a Bulma DSL for free.
Sutil uses both Feliz.Engine
and Feliz.Engine.Bulma
Bulma Framework Generation
The Feliz.Engine.Bulma repository includes a code generator for Bulma, which was used to generate this library. It should make it easier to incorporate updates to Bulma and then regenerate the library. Of course, others may also find it useful for their own Bulma projects. The data files for the generator were converted from the source files of Roman's Feliz.Bulma project.
See folder ./gen
in the repository for the code generator.
Coverage
This is the status of Feliz.Engine.Bulma with respect to Feliz.Bulma, which is a complete implementation of Bulma:
- Top-level elements (eg, bulma.hero) 83 / 83
- Sub-elements (eg, bulma.button.span) 24 / 24
- Modifiers (eg is-fullheight) 760 / 760
- Extensions (eg DateTimePicker) 0 / 11
Usage
See example App in src/App for full details.
Given an implementation of Feliz.Engine
for a particular DSL, then the simplest way to get started is:
// Dsl is an example DOM building framework, and exports open Dsl // Html and Attr are instances of // - Feliz.Engine.HtmlEngine<DslNode> and // - Feliz.Engine.AttrEngine<DslNode> respectively // let bulma = Feliz.Engine.Bulma.BulmaEngine<DslNode>( Html, Attr )
However, you can copy & paste src/Feliz.Engine.Bulma/Binding.fs into your project (inserting the correct DSL types appropriately),
and you'll have additional shortcuts to modifiers such as size.is6
, color.isDanger
instead of bulma.m.color.isDanger
etc.
// -------------------------------------------------------- // !!! DO NOT EDIT !!! // Generated from templates/Binding.template.fs // -------------------------------------------------------- // This isn't compiled into the Feliz.Engine.Bulma package. Copy it to your framework library // and replace Framework and FrameworkElement appropriately. It isn't necessary, but it may // help reduce some "bulma.m." boilerplate noise in your app namespace Framework.Bulma open Framework let bulma = Feliz.Engine.Bulma.BulmaEngine<FrameworkElement>( Html, Attr ) let helpers = bulma.m.helpers let size = bulma.m.size let spacing = bulma.m.spacing let text = bulma.m.text // ... etc
Example App
The example app in src/App
implements the Bulma form sampler
Example code
This is part of the example App code:
bulma.field.div [ bulma.label [ text "Username" ] bulma.control.div [ control.hasIconsLeft control.hasIconsRight bulma.input.text [ color.isSuccess Attr.placeholder "Text input" Attr.value "bulma" ] bulma.icon [ icon.isSmall icon.isLeft Html.i [ class' "fa fa-user" ] ] bulma.icon [ icon.isSmall icon.isRight Html.i [ class' "fa fa-check" ] ] ] bulma.help [ color.isSuccess text "This username is available" ] ]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK