Oxpecker.ViewEngine
0.5.0
See the version list below for details.
dotnet add package Oxpecker.ViewEngine --version 0.5.0
NuGet\Install-Package Oxpecker.ViewEngine -Version 0.5.0
<PackageReference Include="Oxpecker.ViewEngine" Version="0.5.0" />
paket add Oxpecker.ViewEngine --version 0.5.0
#r "nuget: Oxpecker.ViewEngine, 0.5.0"
// Install Oxpecker.ViewEngine as a Cake Addin #addin nuget:?package=Oxpecker.ViewEngine&version=0.5.0 // Install Oxpecker.ViewEngine as a Cake Tool #tool nuget:?package=Oxpecker.ViewEngine&version=0.5.0
Oxpecker.ViewEngine
Markup example:
open Oxpecker.ViewEngine
type Person = { Name: string }
let subView = p() { "Have a nice day" }
let mainView (model: Person) =
html() {
body(style="width: 800px; margin: 0 auto") {
h1(style="text-align: center; color: red") {
$"Hello, {model.Name}!"
}
subView
ul() {
for i in 1..10 do
br()
li().attr("onclick", $"alert('Test {i}')") {
span(id= $"span{i}", class'="test") { $"Test {i}" }
}
}
}
}
Documentation:
Oxpecker.ViewEngine
is code-as-markup engine used to render your HTML views based on the F# feature called Computation Expressions.
HtmlElement
HtmlElement
is a main building block of Oxpecker.ViewEngine
. It can be constructed from the instance of the HtmlElementType
:
type HtmlElementType =
| NormalNode of string
| VoidNode of string
| TextNode of TextNodeType
This represents 3 types of Html elements: normal tags that have opening and closing part, void tags with no closint part and text nodes (which can be escaped and non-escaped strings).
All HTML tags inherit from HtmlElement
, so you can easily add your own tag by in the same way:
type myTag() =
inherit HtmlElement("myTag")
HtmlElement
holds two collections inside: attributes and children. More on them below.
Children
Normal nodes can have children that will be added to children collection as you write them between curly braces. Void nodes and Text nodes don't have children. You can programmatically access Chidren
property of any HtmlElement
.
let result = div() {
br()
span() { "Some text" }
}
let children = result.Children // <br> and <span>
Attributes
Normal and Void nodes can have attributes. Some general attributes are defined inside HtmlElement
while each tag can have it's specific attributes. This will prevent you from assiging attributes to the element that it doesn't support. You can programmatically access Attributes
property of any HtmlElement
.
let result = div(class'="myClass") {
br(id="1234") // href attribute won't work here
a(href="/") { "Some link" }
}
let children = result.Attributes // myClass
You can also attach any custom attribute to the HtmlElement
using .attr
method:
div().attr("data-secret-key", "lk23j4oij234"){
"Secret div"
}
Event handlers
Oxpecker.ViewEngine
doesn't provide attributes for javascript event handlers like onclick
. This is done on purpose, since it would encourage people using them, which is rather an antipattern. However, if you really need it, you can always use .on
method to achieve same goal.
ViewEngine will create html attribute with inline handler for you:
div().on("click", "alert('Hello')"){
"Clickable div"
}
// <div onclick="alert('Hello')">Clickable div</div>
HTML escaping
Oxpecker.ViewEngine
will escape text nodes and attribute values for you. However, sometimes it's desired to render unescaped html string, in that case raw
function is provided
div(){
"<script></script>" // This will be escaped
raw "<script></script>" // This will NOT be escaped
}
Rendering
There are several functions to render HtmlElement
(after opening Oxpecker.ViewEngine namespace):
- Render.toString will render to standard .NET UTF16 string
- Render.toBytes will render to UTF8-encoded byte array
- Render.toHtmlDocBytes is the same as Render.toBytes, but will also prepend
"<!DOCTYPE html>"
to the HTML document
Aria
To enable ARIA attributes support you need to open Aria
module:
open Oxpecker.ViewEngine.Aria
let x = span(
role="checkbox",
id="checkBoxInput",
ariaChecked="false",
tabindex=0,
ariaLabelledBy="chk15-label"
)
Fragments
Sometimes you need to group several elements together without wrapping them in div
or similar. You can use __
special tag for that:
let onlyChildren = __() {
span() { "Some text" }
span() { "Some other text" }
}
let parent = div() {
onlyChildren
}
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net8.0
- FSharp.Core (>= 8.0.200)
- Microsoft.Extensions.ObjectPool (>= 8.0.2)
NuGet packages (2)
Showing the top 2 NuGet packages that depend on Oxpecker.ViewEngine:
Package | Downloads |
---|---|
Oxpecker
F# web framework built on top of ASP.NET Core |
|
Oxpecker.Htmx
HTMX support for Oxpecker.ViewEngine |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.0.0 | 0 | 11/19/2024 |
0.15.2 | 221 | 11/6/2024 |
0.15.1 | 374 | 10/26/2024 |
0.15.0 | 131 | 10/9/2024 |
0.14.1 | 82 | 10/8/2024 |
0.14.0 | 409 | 8/30/2024 |
0.13.1 | 1,723 | 8/23/2024 |
0.13.0 | 146 | 8/22/2024 |
0.12.0 | 474 | 8/13/2024 |
0.11.0 | 80 | 8/5/2024 |
0.10.2 | 163 | 7/24/2024 |
0.10.1 | 98 | 7/23/2024 |
0.10.0 | 302 | 7/17/2024 |
0.9.0 | 118 | 7/16/2024 |
0.8.0 | 109 | 6/18/2024 |
0.7.2 | 1,131 | 5/8/2024 |
0.7.1 | 124 | 4/29/2024 |
0.7.0 | 818 | 3/5/2024 |
0.6.0 | 130 | 3/3/2024 |
0.5.0 | 225 | 2/29/2024 |
0.4.0 | 150 | 2/21/2024 |
0.3.0 | 121 | 2/15/2024 |
0.2.0 | 287 | 1/24/2024 |
0.1.0 | 141 | 1/19/2024 |
More HTML tags details