format-html.fs

// F# HTML DSL alternate formatting examples

// Notes:
// Elements have only 1 list parameter, not 2.
// A `prop.` prefix is used for props/attrs -- anything else is an element.


// Example 1: Feliz style -- https://github.com/Zaid-Ajaj/Feliz
// prop.* are the primary children, and elements are nested inside a prop.children [ ... ] sublist

Html.div [
    prop.children [

        Navbar.navbar [
            prop.Navbar.Color IsPrimary
            prop.children [
                Navbar.Item.div (Heading.h2 "SAFE Template")
            ]
        ]

        Container.container [

            prop.children [
                Content.content [
                    prop.Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ]
                    prop.children [
                        Heading.h3 ("Press buttons to manipulate counter: " + show model)
                    ]
                ]

                Columns.columns [
                    prop.children [
                        Column.column [ button "-" (fun _ -> dispatch Decrement) ]
                        Column.column [ button "+" (fun _ -> dispatch Increment) ]
                    ]
                ]
            ]
        ]

        Footer.footer [
            prop.children [
                Content.content [
                    prop.Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ]
                    prop.children [ safeComponents ]
                ]
            ]
        ]
    ]
]


// Example 2: "Inverse" of Feliz style
// elements are the primary children, and prop.* are nested inside a (pseudo-element) `props` [ ... ] sublist

Html.div [

    Navbar.navbar [
        props [ prop.Navbar.Color IsPrimary ]
        Navbar.Item.div (Heading.h2 "SAFE Template")
    ]

    Container.container [

        Content.content [
            props [
                prop.Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ]
            ]
            Heading.h3 ("Press buttons to manipulate counter: " + show model)
        ]

        Columns.columns [
            Column.column [ button "-" (fun _ -> dispatch Decrement) ]
            Column.column [ button "+" (fun _ -> dispatch Increment) ]
        ]

    ]

    Footer.footer [
        Content.content [
            props [
                prop.Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ]
            ]
            safeComponents
        ]
    ]

]


// Example 3: "Mixed" style
// prop.* and elements are both primary children, distinguished by type (via interface or DU)

Html.div [

    Navbar.navbar [
        prop.Navbar.Color IsPrimary
        Navbar.Item.div (Heading.h2 "SAFE Template")
    ]

    Container.container [

        Content.content [
            prop.Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ]
            Heading.h3 ("Press buttons to manipulate counter: " + show model)
        ]

        Columns.columns [
            Column.column [ button "-" (fun _ -> dispatch Decrement) ]
            Column.column [ button "+" (fun _ -> dispatch Increment) ]
        ]

    ]

    Footer.footer [
        Content.content [
            prop.Content.Modifiers [ Modifier.TextAlignment (Screen.All, TextAlignment.Centered) ]
            safeComponents
        ]
    ]

]