F# Fable и бутстрап модальные

Question

Как я могу создать модальный в Fable, он должен работать как обычный модальный Bootstrap.

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[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
          tr[][
            td[ClassName "w200 text-rigth"][!! "E-mail"]
            td[][!! "[e-mail]"]
          ]
        ]
      ]
      div[ClassName "modal-footer"][
        button[Type "button"; ClassName "btn btn-default btn-lg"; DataDismiss "modal"][!! "Close"]
      ]
    ]
  ]
]

В этом примере я получаю следующие ошибки

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

Есть ли другой способ?

Answer 1

Проблема в том, что эти атрибуты не определены по умолчанию на React.Props.HTMLAttr однако вы можете расширить интерфейс, внедрив следующее в ваш проект.

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

Очевидно, вы можете расширить этот союз в соответствии с вашими потребностями.

Answer 2

Вы также можете использовать настраиваемый атрибут для установки атрибутов, не определенных в Fable.React. например. для ArialLabel:

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