F# Fable and bootstrap modals

Question

How can I create modal in Fable, it should work as normal Bootstrap modal.

div[Id "userOverview"; ClassName "modal fade"; Role "dialog"; TabIndex -1.; AriaLabelleddBy "userOverviewTile"][
  div[ClassName "model-dialog"; Role "document"][
    div[ClassName "model-content"][
      div[ClassName "modal-header"][
        button[ClassName "close"; DataDismiss "modal"; AriaLabel "Close"][
          span[AriaHidden "true"][!! "$times;"]
        ]
        h4[ClassName "modal-title"; Id "userOverviewTitle"][!! "User Overview"]
      ]
      div[ClassName "modal-body"][
        table[ClassName "table table-striped table-bordered table-hover table-responsive"][
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[email protected]"]
          ]
        ]
      ]
      div[ClassName "modal-footer"][
        button[Type "button"; ClassName "btn btn-default btn-lg"; DataDismiss "modal"][!! "Close"]
      ]
    ]
  ]
]

In this example i get the following errors

error FSHARP: The value or constructor 'AriaLabelleddBy' is not defined  
error FSHARP: The value or constructor 'DataDismiss' is not defined
error FSHARP: The value or constructor 'AriaLabel' is not defined
error FSHARP: The value or constructor 'AriaHidden' is not defined

Is there another way?

It looks as though you are using Suave.Expiremental? Right? Where did you get this code from? — JosephStevens
This part of code i wrote, creating modal from html design, I m pretty new in fable or f# overall so I m not sure what the issue is :/ — Marko Reljic
Can you show us what modules you're opening? Fable is just a F# -> JS compiler so we don't have enough information about which libraries you're using. — TheQuickBrownFox
open Elmish open Fable.Core open Fable.Core.JsInterop open Fable.Helpers.React open Fable.Helpers.React.Props open Helpers open Fable.PowerPack open Fable.PowerPack.Fetch.Fetch_types open Fable.Import.Browser open Fable.Import.ReactBoootstrapTreeview open Fable.Import.Download — Marko Reljic
The first two errors look like typos. Are you sure they're supposed to exist? — Fyodor Soikin

Colin Bull Colin Bull · Accepted Answer · 2017-10-25T09:34:52

The issue is that these attributes are not defined by default on React.Props.HTMLAttr however you can extend the interface by implementing the following in your project.

 type HTMLAttr = 
     | [<CompiledName("data-dismiss")>] DataDismiss of string
     | [<CompiledName("aria-label")>] AriaLabel of string
     interface IHTMLProp

Obviously you can extend this union to suit your needs.

F# Fable and bootstrap modals

1 Answers