Websharper : Using LI tags

Question

I want to create something like that :

<ul>
    <li>menu1
         <ul>
             <li>sub-menu1</li>
         </ul>
    </li>
    <li>menu2</li>
</ul>

So i write the following code using WebSharper :

let el =
        UL [
            LI [
                Text "menu1"
                UL [
                    LI [Text "sub-menu1"]
                ]
            ]
            LI [Text "menu2"]
        ]

But it says that

UL [
    LI [Text "sub-menu1"]
]

should have the type IPagelet but currently have the type Element.

Does anyone have an idea on how to put a text + something else under an li element using WebSharper ?

Edit: Just to say that I have a bug on stakc, I can't comment or accepted the answer of @Tarmil...

Reign

If you need text and another element (say Strong), I ended up using Span to wrap the text: [ LI [ Span [ Text "sub-menu1 "]; [ Strong [Text "is awesome" ] ] ] ] – Nolannolana

@ChristopherStevenson Tanks for the tips. It's was actually to build a menu using JQueryUI. – Reign

No prob: I'm still learning WebSharper too. :) – Nolannolana

Answer 1

The issue here is that two elements in the same list, Text "menu1" and UL [...], have types IPagelet and Element respectively. Element is a subtype of IPagelet, so this should work, but unfortunately the F# type inference has some difficulties with this situation. So you need to help it by casting UL [...] to IPagelet:

let el =
    UL [
        LI [
            Text "menu1"
            UL [
                LI [Text "sub-menu1"]
            ] :> IPagelet
        ]
        LI [Text "menu2"]
    ]

In fact, this problem would be eliminated if the combinators had type seq<IPagelet> -> Element instead of seq<#IPagelet> -> Element. We will probably change them to that in the future, but since it would be a breaking change, we're keeping it for the next major version.

Abdella

yeah this is a pain - but -< will help a lot if you just split things like Attr.Class and the contents (indeed it even makes the code more readable) - here you can try LI [Text "menu"] -< [ UL [ ... ] ] – Oral