F# Fable 和引导模式答案

【问题标题】：F# Fable and bootstrap modalsF# Fable 和引导模式
【发布时间】：2017-07-31 12:12:06
【问题描述】：

如何在 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[][!! "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"]
      ]
    ]
  ]
]

在这个例子中我得到以下错误

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

还有其他方法吗？

【问题讨论】：

看起来您使用的是 Suave.Expiremental？对？您从哪里获得此代码？
这部分代码是我编写的，从 html 设计创建模态，我在 fable 或 f# 中很新，所以我不确定问题是什么：/
你能告诉我们你opening 是什么模块吗？ Fable 只是一个 F# -> JS 编译器，所以我们没有足够的信息来说明您正在使用哪些库。
打开 Elmish 打开 Fable.Core 打开 Fable.Core.JsInterop 打开 Fable.Helpers.React 打开 Fable.Helpers.React.Props 打开 Helpers 打开 Fable.PowerPack 打开 Fable.PowerPack.Fetch.Fetch_types 打开 Fable .Import.Browser 打开 Fable.Import.ReactBoootstrapTreeview 打开 Fable.Import.Download
前两个错误看起来像是拼写错误。你确定它们应该存在吗？

标签： f# bootstrap-modal fable-f#

【解决方案1】：

问题是React.Props.HTMLAttr 默认情况下未定义这些属性，但是您可以通过在项目中实现以下内容来扩展接口。

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

显然，您可以扩展此联合以满足您的需求。

【讨论】：