mdgriffith / elm-ui

What if you never had to write CSS again?
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/
BSD 3-Clause "New" or "Revised" License
1.34k stars 110 forks source link

Add a function similar to ZStack in SwiftUI #342

Open dullbananas opened 2 years ago

dullbananas commented 2 years ago

It would be like row or column except it puts each element on top of the previous one

NduatiK commented 2 years ago

Assuming you want a solution and don't care if its the library that does it.

You can pull this off using the inFront attribute. Ellie

zStack attrs children =
    case children of
        [] ->
            none
        bottomMost :: otherChildren ->
            el 
                (inFront (zStack attr otherChildren) :: attr)        
                bottomMost 

then

module Main exposing (..)

import Element exposing (Element, alignRight, centerY, el, fill, fillPortion, height, padding, px, rgb, rgb255, rgba, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input

type Msg
    = Noop Float

main =
    Element.layout [] content

content =
    zStack [width fill]
    [ text "Bottom"
    , el [Element.moveDown 10] ( text "Middle" )
    , el [Element.moveDown 20] (text "Top")
    ] 

zStack attrs children =
    case children of
        [] ->
            Element.none
        bottomMost :: otherChildren ->
            el 
                (Element.inFront (zStack attrs otherChildren) :: attrs)        
                bottomMost