supermacro / elm-antd / Ant.Space

Utilities for setting spacing between components

Creating a Space value

space : List (Html msg) -> Space msg

Create a Space value with default values

space [ myEl, myOtherEl, mySuperCoolEl ]

Customizing the layout between components

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


type SpaceDirection
    = Horizontal
    | Vertical

Direction of the layout (think flexbox direction)


type SpaceSize
    = Small
    | Medium
    | Large
    | Custom Basics.Float

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%.

Rendering your Space component

toHtml : Space msg -> Html msg

Convert your Space into a Html msg