Skip to content

Instantly share code, notes, and snippets.

@lolp1

lolp1/fable-repl.fs

Created May 12, 2019 01:50
Show Gist options
  • Save lolp1/c6b630cb70f78f1ec9ada4a2b34f6b31 to your computer and use it in GitHub Desktop.
Save lolp1/c6b630cb70f78f1ec9ada4a2b34f6b31 to your computer and use it in GitHub Desktop.
Download ZIP
Created with Fable REPL
Raw
fable-repl.fs
// More info about Fulma at https://mangelmaxime.github.io/Fulma/
module Fulma.Table
open Fable.React
open Fable.React.Props
open Fulma
let modifierFullWitdth () =
Table.table [ Table.IsBordered
Table.IsFullWidth
Table.IsStriped ]
[ thead [ ]
[ tr [ ]
[ th [ ] [ str "Firstname" ]
th [ ] [ str "Surname" ]
]]
tbody [ ]
[ tr [ ]
[ td [ ] [ str "Maxime" ]
td [ ] [ str "Mangel" ]
]
tr [ Class "is-selected" ]
[ td [ ] [ str "Jane" ]
td [ ] [ str "Doe" ]
]
tr [ ]
[ td [ ] [ str "John" ]
td [ ] [ str "Doe" ]
]]]
div [] [
Card.card [] [Card.content [] [
modifierFullWitdth()] ]
] |> mountById "elmish-app"
Raw
fable-repl.html
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<script src="__HOST__/libs/react.production.min.js"></script>
<script src="__HOST__/libs/react-dom.production.min.js"></script>
<link rel="stylesheet" href="__HOST__/libs/css/bulma.min.css" />
<link rel="stylesheet" href="__HOST__/libs/css/all.min.css" />
<style>
/* Only needed for icon sample */
.container-sizes .block {
display: flex;
}
.container-sizes .icon {
background-color: yellow;
margin: 0 5px;
}
</style>
</head>
<body class="app-container">
<div id="elmish-app" class="elmish-app"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment