Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mvsmal/fable-material-ui
Fable bindings for Material-UI https://mvsmal.github.io/fable-material-ui/
https://github.com/mvsmal/fable-material-ui
fable fsharp material-ui
Last synced: 2 months ago
JSON representation
Fable bindings for Material-UI https://mvsmal.github.io/fable-material-ui/
- Host: GitHub
- URL: https://github.com/mvsmal/fable-material-ui
- Owner: mvsmal
- License: mit
- Created: 2018-07-30T13:59:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T14:20:47.000Z (over 1 year ago)
- Last Synced: 2024-04-28T07:13:02.996Z (2 months ago)
- Topics: fable, fsharp, material-ui
- Language: F#
- Homepage:
- Size: 14.8 MB
- Stars: 61
- Watchers: 4
- Forks: 8
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-fable - fable-material-ui - Fable bindings for [MaterialUI](https://material-ui.com) (Libraries)
README
[](https://www.nuget.org/packages/Fable.MaterialUI/) [](https://travis-ci.com/mvsmal/fable-material-ui)
# Fable.MaterialUI
Fable bindings for [Material-UI](https://material-ui.com)
# Installation
Install Fable bindings for Material-UI
## Nuget
Fable Material-UI is available as [Nuget package](https://www.nuget.org/packages/Fable.MaterialUI/)
```sh
dotnet add package Fable.MaterialUI
```
or
```sh
paket add Fable.MaterialUI
```
## NPM
You also need to install [Material-UI](https://material-ui.com/getting-started/installation/) npm package
```sh
npm install @material-ui/core
```
or
```sh
yarn add @material-ui/core
```
# Usage
How to use the bindings
Simply open Fable.MaterialUI.Core and Props module
```fsharp
open Fable.MaterialUI.Core
open Fable.MaterialUI.Props
```
There are several components, such as `button`, which are also present in `Fable.Helpers.React`. To avoid conflicts you can assign module names:
```fsharp
module R = Fable.Helpers.React
module Mui = Fable.MaterialUI.Core
```
## Minimal example
```fsharp
module R = Fable.Helpers.React
module Mui = Fable.MaterialUI.Core
open Fable.MaterialUI.Props
let view =
Mui.button [
ButtonProp.Variant ButtonVariant.Contained
] [ R.str "Hello world!" ]
```
# Migration to version 2
## Required dependency
Fable.MaterialUI v2 works only with **dotnet-fable** > [2.0.6](https://www.nuget.org/packages/dotnet-fable/2.0.6)
Make sure to use the correct version
## Breaking changes
`Styles.Custom` is now a function and has the signature: `string * CSSProp list -> Styles`. You don't need to manually convert the list of CSS props to an object
Predefined `Styles` props matching class keys are moved to a nested module `Themes.Styles` and require either `open Fable.MaterialUI.Themes.Styles` or qualified access, e.g. `Styles.Root`
`TransitionDuration` is removed from:
* MenuProp
* PopoverProp
* StepContentProp
and moved to `MaterialProp.TransitionDurationAuto` (compiled to `transitionDuration` but allows to pass `AutoEnum.Auto`)
## Other
Since `keyValueList` function is not recursive in Fable 2, there are several properties which have now been replaced with functions, converting a list of DU cases to an object. The usage of those props stays the same, except `Styles` (see above).
# Build
## Dependencies
To build the project you need Paket and FAKE installed as dotnet global tool:
```
dotnet tool install paket -g
dotnet tool install fake-cli -g
```
Then run:
```
paket restore
fake build
```