Unclear in documentation how to pass parameters to GridProp.Xs

[askasp]

Might be because I'm very new to F#, but the documentation does not give a clear indication on how to use GridProp.Xs (or Lg, etc..). The input is of type GridSize, but GridSize is defined as:

type GridSize = U3<bool, AutoEnum, GridSizeNum>

where U3 is a custom constructor. It would be better with an example showing a value being set.

PS: Great repo, I really appreciate the effort!

[mvsmal]

Hi @askasp,

U3<bool, AutoEnum, GridSizeNum> is and erased union, which means that after compilation to JS only the real value will be passed to the receiver. It is needed just to have static typing and be able to pass different types to the same function/argument. In order to use it you can do:

// Multiple examples
[ GridProp.Xs (true |> GridSize.Case1) ]
[ GridProp.Xs (AutoEnum.Auto |> GridSize.Case2) ]
[ GridProp.Xs (GridSizeNum.``1`` |> GridSize.Case3) ]

// or shorter
[ GridProp.Xs (true |> U3.Case1) ]
[ GridProp.Xs (AutoEnum.Auto |> U3.Case2) ]
[ GridProp.Xs (GridSizeNum.``1`` |> U3.Case3) ]

// or with operator !^ (just syntax sugar but still static typing)
[ GridProp.Xs !^true ]
[ GridProp.Xs !^AutoEnum.Auto ]
[ GridProp.Xs !^GridSizeNum.``1`` ]

You can find more information here: https://fable.io/docs/interacting.html#erase-attribute

[askasp]

Thank you! If you want me to update the grid API markdown with an example I'll gladly make a pull request