SummaryItem represents a single item in a list that is usually selectable or searchable.
This component is meant to be used with ListView.
import UI.ListView.SummaryItem as Summary
listItemView : AppConfig -> Bool -> Item -> Element Msg
listItemView appConfig isSelected item =
Summary.summaryItem item.name item.subtitle
|> Summary.withSelected isSelected
|> Summary.withBadge (Badge.grayLight "badge")
|> Summary.renderElement appConfig.renderConfig
listView : AppConfig -> Model -> ListView Item Msg
listView appConfig model =
listItemView appConfig
|> ListView.selectList Msg.Select Item.id
|> ListView.withSearchField (searchField appConfig model)
|> ListView.withActionBar (actionBar appConfig)
|> ListView.withDomId "item-list"Constructs a summary by receiving its title and caption.
Summary.summaryItem "Item title" "Item caption"Indicates whether the summary is selected or not.
Summary.withSelected True
someListViewAdds a badge to the right side of the summary.
Summary.withBadge someBadge
someListViewAdds a checkbox to the left side of the summary.
Summary.withCheckbox someCheckbox
someListViewAdds an icon to the right side of the summary.
Summary.withIcon (Icon.fix "Problem Solving")
someListViewAdds an icon to the left side of the summary.
Summary.withBulletIcon (Icon.fixIssues "Problem Solving")
someListViewApplies a tone to summary's background.
Summary.withBackgroundTone Palette.toneWarning
someListViewEnd of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.
The
SummaryItem msgtype is used for describing the component for later rendering.