12

GitHub - Zaid-Ajaj/Feliz.ViewEngine.Htmx: A library that allows using Htmx attri...

 2 years ago
source link: https://github.com/Zaid-Ajaj/Feliz.ViewEngine.Htmx
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.
neoserver,ios ssh client

Feliz.ViewEngine.Htmx

A library that allows using Htmx attributes with Feliz.ViewEngine

Install from Nuget

dotnet add package Feliz.ViewEngine.Htmx

Usage

The library exposes the hx module and type which are the entry point to the attributes available from HTMX

Here is an example AspNet controller (see ./sample application) but this library can be used anywhere to render out HTML

open Microsoft.AspNetCore.Mvc
open Microsoft.Extensions.Logging
open Feliz.ViewEngine
open Feliz.ViewEngine.Htmx

type HomeController (logger : ILogger<HomeController>) =
    inherit Controller()

    (* Utility functions here *)

    member private this.MainLayout (body: ReactElement list) =
        let mainLayout = Html.html [
            Html.head [
                Html.title "F# ♥ Htmx"
                Html.script [ prop.src "https://unpkg.com/[email protected]" ]
                Html.meta [ prop.charset.utf8 ]
            ]

            Html.body body
        ]

        this.Render(mainLayout)

    member this.Clicked() = this.Partial [
        Html.p "Content retrieved by HTMX"
    ]

    member this.Index() = this.MainLayout [
        Html.h1 "Home"
        Html.button [
            hx.get "/Home/Clicked"
            hx.swap.outerHTML
            prop.text "Click me!"
        ]
    ]

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK