PaackEng / paack-ui / 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


type ContentPlaceholder

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

custom : { icon : String -> UI.Icon.Icon, title : String, body : String } -> ContentPlaceholder

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

nothingToSeeHere : ContentPlaceholder

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

ContentPlaceholders.nothingToSeeHere
    |> ContentPlaceholders.renderElement renderConfig

Size

withLargeSize : ContentPlaceholder -> ContentPlaceholder

With withLargeSize, you'll have a larger ContentPlaceholder.

ContentPlaceholders.withLargeSize somePlaceholder

NOTE: Default size is Size.medium.

Rendering

renderElement : UI.RenderConfig.RenderConfig -> ContentPlaceholder -> Element msg

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