CODEWITHSUNDEEP
htmlhaskellblaze-html
Adam D
Adam D

Reputation: 2197

How to use custom HTML attributes with Blaze in Haskell

I'm trying to write the following HTML element from Bootstrap in blaze-html in Haskell.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

My problem is that I can't figure out how to use the custom attributes data-bs-toggle etc. I can't find any combinator here that lets me define a custom attribute name.

import Text.Blaze.Html
import Text.Blaze.Html.Renderer.Text
import Text.Blaze.Html5 qualified as H
import Text.Blaze.Html5.Attributes qualified as A

H.button
  H.! A.class_ "navbar-toggler"
  H.! A.type_ "button"
  -- I need something like this ...
  H.! A.custom "data-bs-toggle" "collaps"

Upvotes: 0

Views: 54

Answers (1)

Adam D
Adam D

Reputation: 2197

I found out how to do this using the blaze-from-html tool

You can use the dataAttribute combinator.

import Text.Blaze.Html
import Text.Blaze.Html.Renderer.Text
import Text.Blaze.Html5 qualified as H
import Text.Blaze.Html5.Attributes qualified as A

H.button
  H.! A.class_ "navbar-toggler"
  H.! A.type_ "button"
  H.! dataAttribute "bs-toggle" "collapse"
  H.! dataAttribute "bs-target" "#navbarSupportedContent"

Upvotes: 1

Related Questions