How to render 3 contiguous rectangles with Elm-UI?

Learn
1

Hi All,

I’m a beginner with Elm and Elm-UI.
I’d like to render 3 contiguous rectangles of different color like this:

[--A--][--B--][--C--]

This is how I’ve done it:

viewHeaderColorLine =
    row [ width fill, height (px 10) ]
        [ el [ width fill, Background.color red] (el [] (text " "))
        , el [ width fill, Background.color blue] (el [] (text " "))
        , el [ width fill, Background.color green] (el [] (text " "))]

It works but the (el [] (text " ") feels like a hack to me, is it ? is there a proper way to do it ?

Thanks,
Dan

2

Have you tried Element.none instead of Element.text? I think you can rove the nested el too. You might need to add height fill to the rectangles too.

2 Likes
3

Thanks a lot for the tips, this looks way better:

viewHeaderColorLine =
    row [ width fill, height (px 10) ]
        [ el [width fill, height fill, Background.color red] Element.none 
        , el [width fill, height fill, Background.color green] Element.none 
        , el [width fill, height fill, Background.color brown] Element.none ]
1 Like
4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.