Utilities for setting spacing between components
space : List (Html msg) -> Space msg
Create a Space value with default values
space [ myEl, myOtherEl, mySuperCoolEl ]
direction : SpaceDirection -> Space msg -> Space msg
Set the direction of your Space value
space myElementList
|> direction Vertical
withSize : SpaceSize -> Space msg -> Space msg
Alter the sizing between elements. By default the size is Small
space elements
|> withSize Large
Direction of the layout (think flexbox direction)
The size of the space between elements
withFullCrossAxisSize : Space msg -> Space msg
Whether to fill up the full space (100% width or 100% height) of the perpendicular axis. The main axis of a Space
container is determined by the direction of the Space
container.
If the direction is Horizontal
then the cross axis is vertical. Thus, withFullCrossAxisSize
will set height: 100%
.
If the direction is Vertical
then the cross axis is horizontal. Thus, withFullCrossAxisSize
will set width: 100%
.
toHtml : Space msg -> Html msg
Convert your Space into a Html msg