F# Fable and bootstrap modals

user_4553996 0
Viewed 775

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[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "Lorem@ipsum.co"]
          ]
        ]
      ]
      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?

fable-f# bootstrap-modal f#
2 Answers

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.

user_13801890

You can also use the custom attribute to set attributes not defined in Fable.React. eg. for ArialLabel:

div [ ..
    HTMLAttr.Custom ("aria-label","Close")
] [
    ....
]
user_65842620
Related