design-discussion-elm-ui-2 icon indicating copy to clipboard operation
design-discussion-elm-ui-2 copied to clipboard

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

Open MartinSStewart opened this issue 4 years ago • 1 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

MartinSStewart avatar Aug 24 '19 08:08 MartinSStewart