mdgriffith / design-discussion-elm-ui-2

A repo for discussing changes to Elm UI 2

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support Element.fill and Element.fillPortion in padding and spacing

MartinSStewart opened this issue · comments

It would be convenient if Element.padding and Element.spacing could use the fill behavior that Element.width and Element.height have.

For example Element.padding Element.fill in

body =
    Element.el
        [ Background.color <| Element.rgb 1 0.5 0.5
        , Element.width Element.fill
        , Element.height Element.fill
        ]
        Element.none

view = Element.el [ Element.padding Element.fill ] body

would behave the same way as

body =
    Element.el
        [ Background.color <| Element.rgb 1 0.5 0.5
        , Element.width Element.fill
        , Element.height Element.fill
        ]
        Element.none


filler =
    Element.el
        [ Element.width Element.fill, Element.height Element.fill ]
        Element.none


view =
    Element.row
        [ Element.width Element.fill, Element.height Element.fill ]
        [ filler
        , Element.column
            [ Element.width Element.fill, Element.height Element.fill ]
            [ filler, body, filler ]
        , filler
        ]

Ellie example

For spacing, this code

view = Element.row 
    [ Element.spacing Element.fill
    , Element.width Element.fill
    ] 
    [ Element.text "first", Element.text "second", Element.text "third" ]

would behave the same way as

filler =
    Element.el
        [ Element.width Element.fill, Element.height Element.fill ]
        Element.none

view =
    Element.row
        [ Element.width Element.fill ]
        [ Element.text "first"
        , filler
        , Element.text "second"
        , filler
        , Element.text "third"
        ]

Ellie example

Note that you can use spaceEvenly for the same effect as your particular spacing example:

view =
    Element.row
        [ Element.width Element.fill
        , Element.spaceEvenly
        ]
        [ Element.text "first"
        , Element.text "second"
        , Element.text "third"
        ]