Giraffe.ViewEngine.Htmx
1.9.5
dotnet add package Giraffe.ViewEngine.Htmx --version 1.9.5
NuGet\Install-Package Giraffe.ViewEngine.Htmx -Version 1.9.5
<PackageReference Include="Giraffe.ViewEngine.Htmx" Version="1.9.5" />
paket add Giraffe.ViewEngine.Htmx --version 1.9.5
#r "nuget: Giraffe.ViewEngine.Htmx, 1.9.5"
// Install Giraffe.ViewEngine.Htmx as a Cake Addin
#addin nuget:?package=Giraffe.ViewEngine.Htmx&version=1.9.5
// Install Giraffe.ViewEngine.Htmx as a Cake Tool
#tool nuget:?package=Giraffe.ViewEngine.Htmx&version=1.9.5
Giraffe.ViewEngine.Htmx
This package enables htmx support within the Giraffe view engine.
htmx version: 1.9.5
Setup
- Install the package.
- Prior to using the attribute or support modules,
open Giraffe.ViewEngine.Htmx
.
Use
Following Giraffe View Engine's lead, there are a set of attribute functions for htmx; for many of the attributes, there are also helper modules to assist with typing the values. The example below utilizes both:
let autoload =
div [ _hxGet "/this/data"; _hxTrigger HxTrigger.Load ] [ str "Loading..." ]
Support modules include:
HxEncoding
HxHeaders
HxParams
HxRequest
HxSwap
(requiresopen Giraffe.Htmx
)HxTrigger
HxVals
There are two XmlNode
s that will load the htmx script from unpkg; Htmx.Script.minified
loads the minified version, and Htmx.Script.unminified
loads the unminified version (useful for debugging).
This also supports fragment rendering, providing the flexibility to render an entire template, or only a portion of it (based on the element's id
attribute).
Learn
htmx's attributes and these attribute functions map one-to-one. There are two exceptions:
_hxBoost
impliestrue
; use_hxNoBoost
to set it tofalse
._hxSwapWithTransition
renders the standardhx-swap
attribute and appendstransition:true
to the specified swap value.
The htmx hx-on
attribute supports multiple events if they are separated with a newline (\n
) character. The value provided to this attribute will be attribute-escaped, but in testing, it was interpreted correctly.
The support modules contain named properties for known values (as illustrated with HxTrigger.Load
above). A few of the modules are more than collections of names, though:
HxRequest
has aConfigure
function, which takes a list of strings; the other functions in the module allow for configuring the request.
HxRequest.Configure [ HxRequest.Timeout 500 ] |> _hxRequest
HxTrigger
is (by far) the most complex of these modules. Most uses won't need that complexity; however, complex triggers can be defined by piping into or composing with other functions. For example, to define an event that responds to a shift-click anywhere on the document, with a delay of 3 seconds before firing:
HxTrigger.Click
|> HxTrigger.Filter.Shift
|> HxTrigger.FromDocument
|> HxTrigger.Delay "3s"
|> _hxTrigger
// or
(HxTrigger.Filter.Shift >> HxTrigger.FromDocument >> HxTrigger.Delay "3s") HxTrigger.Click
|> _hxTrigger
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. |
-
net6.0
- FSharp.Core (>= 7.0.400)
- Giraffe.Htmx.Common (>= 1.9.5)
- Giraffe.ViewEngine (>= 1.4.0)
-
net7.0
- FSharp.Core (>= 7.0.400)
- Giraffe.Htmx.Common (>= 1.9.5)
- Giraffe.ViewEngine (>= 1.4.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Update script tags to pull htmx 1.9.5