2017-07-31 6 views
2

フェイブルでモーダルを作成するには、通常のブートストラップモーダルとして動作するはずです。もう一つの方法は、私は次のエラーF#フェイブルとブートストラップモーダル

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 

取得この例では

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

ありますか?

+0

Suave.Expirementalを使用しているかのように見えますか?右?どこからこのコードを入手しましたか? – JosephStevens

+0

コードのこの部分は、htmlデザインからモーダルを作成して書いています。私は寓話やf#でかなり新しいので、問題は何か分かりません。/ –

+0

あなたは '開いている 'モジュールを教えてください。 Fableは単なるF# - > JSコンパイラなので、使用しているライブラリに関する十分な情報がありません。 – TheQuickBrownFox

答えて

2

問題は、これらの属性がデフォルトでReact.Props.HTMLAttrに定義されていないことですが、プロジェクトで次のように実装することでインターフェイスを拡張できます。

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

明らかに、あなたのニーズに合わせてこのユニオンを拡張することができます。

関連する問題