PaackEng/paack-ui/4.0.0

NOTE: the latest version is 7.23.0

UI.ContentPlaceholder

UI.ContentPlaceholders fills space in an area that is waiting for some action from the user.

An content-placeholder can be created and rendered as in the following pipeline:

ContentPlaceholders.custom
    { icon = Icon.fix
    , title = "Select A Group"
    , body = "Please select a group to fix from the list on the left."
    }
    |> ContentPlaceholders.withSize Size.large
    |> ContentPlaceholders.renderElement renderConfig

There are also some ready-to-use costructors.

Building

The ContentPlaceholder type is used for describing the component for later rendering.

{ icon : String -> Icon
, title : String
, body : String
}

Constructs a generic ContentPlaceholder.

ContentPlaceholders.custom
    { icon = Icon.download
    , title = "Pick a file"
    , body = "Please select a file to download it."
    }
    |> ContentPlaceholders.renderElement renderConfig

Common values

One of the ready-to-use constructors. Used in impossible-states and empty unmanaged lists.

ContentPlaceholders.nothingToSeeHere
    |> ContentPlaceholders.renderElement renderConfig

Size

With withLargeSize, you'll have a larger ContentPlaceholder.

ContentPlaceholders.withLargeSize somePlaceholder

NOTE: Default size is Size.medium.

Rendering

renderElement : RenderConfig -> ContentPlaceholder -> Element msg

End of the builder's life. The result of component function is a ready-to-insert Elm UI's Element.