Making a Bootstrap style split button with Reflex

This code makes use of a new Haskell Library, Reflex, which is a descendant of the ghcjs library. It’s a powerful way to convert Haskell to JS. To learn more about it, take a look at Try Reflex

Here's an example of what I created.

This is the haskell code:

let dropDownAttrs = "id" =: "menu" <> "class" =: "btn dropdown-toggle"
(dropDown, _) <- elAttr' "button" dropDownAttrs  do
  elAttr "span" ("class" =: "fa fa-caret-down") end
  elAttr "span" ("class" =: "sr-only")  text "Toggle Dropdown"  

Same number of lines of code for the HTML code:

<button class="btn dropdown-toggle" id="menu">
  <i class="fa fa-caret-down>
  <span class="sr-only">Toggle Dropdown</span>
</button>

Now, the whole div

elDynAttr "div" buttonClass  do
  let labelAttrs = "class" =: "btn btn-default"
  (labelTitle, _) <- elAttr' "button" labelAttrs  do
    elAttr "i" ("class" =: "fa fa-cog") end
    elAttr' "em" ("class" =: "eye")  text "more text"
      
    -- repeating earlier example
    let dropDownAttrs = "id" =: "extra" <> "class" =: "btn btn-default"
    (dropDown, _) <- elAttr' "button" dropDownAttrs  do
      elAttr "i" ("class" =: "fa fa-caret-down") end
      elAttr "span" ("class" =: "sr-only")  text "Toggle Dropdown"

Whole div altogether:

<button class="btn btn-default">
  <i class="fa fa-cog"></i>
  <em class="eye">more text</em>
</button>
<button class="btn btn-default" id="extra">
  <i class="fa fa-caret-down"></i>
  <span class="sr-only">Toggle Dropdown</span>
</button>