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.
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
nothingToSeeHere : ContentPlaceholder
One of the ready-to-use constructors. Used in impossible-states and empty unmanaged lists.
ContentPlaceholders.nothingToSeeHere
|> ContentPlaceholders.renderElement renderConfig
withLargeSize : ContentPlaceholder -> ContentPlaceholder
With withLargeSize
, you'll have a larger ContentPlaceholder
.
ContentPlaceholders.withLargeSize somePlaceholder
NOTE: Default size is Size.medium
.
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.