F＃寓言和引導模式

如何在寓言中創建模式，它應該像正常的Bootstrap模式一樣工作。F＃寓言和引導模式

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"] 
     ] 
    ] 
    ] 
]

在這個例子中，我得到了以下錯誤

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

有另一種方式？

來源

2017-07-31 Marko Reljic

它看起來好像你使用Suave.Expiremental？對？你從哪裏得到這個代碼？ – JosephStevens

這段代碼是我寫的，從html設計中創建模態，我在寓言或f＃中都很新，所以我不確定問題是什麼：/ –

你能告訴我們什麼模塊是「打開」的嗎？ Fable只是一個F＃ - > JS編譯器，所以我們沒有足夠的關於你正在使用的庫的信息。 – TheQuickBrownFox

問題是這些屬性在默認情況下未在React.Props.HTMLAttr上定義，但是您可以通過在項目中實現以下內容來擴展接口。

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

很明顯，您可以擴展此聯合以滿足您的需求。

來源

2017-10-25 09:34:52

F＃寓言和引導模式

回答

相關問題