Lists are continuous, vertical indexes of text or images.
This module concerns the list items. If you are looking for the list container, refer to Material.List.
import Material.List as List
import Material.List.Item as ListItem
main =
List.list List.config
[ ListItem.listItem ListItem.config
[ text "Line item" ]
]
Internal.Config msg
Configuration of a list item
config : Config msg
Default configuration of a list item
setOnClick : msg -> Config msg -> Config msg
Specify a message when the user interacts with the list item
setDisabled : Basics.Bool -> Config msg -> Config msg
Specify whether a list item should be disabled
Disabled list items cannot be interacted with and have not visual interaction effect.
setSelected : Maybe Selection -> Config msg -> Config msg
Specify whether a list item is selected
A selected list item may be either selected or activated. A list item that may change its selection state within the current page, should be selected. A list item that may not change its state within the current page should be activated.
As a rule of thumb, a navigation list item should be activated, while any other list item should be selected.
setHref : Maybe String -> Config msg -> Config msg
Specify whether a list item is a link list item
Link list items essentially behave like a HTML5 anchor element.
setTarget : Maybe String -> Config msg -> Config msg
Specify a link list item's HTML5 target attribute
Note that non-link list items ignore this configuration option.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
Internal.ListItem msg
List item type
List items can only be rendered within a list container.
listItem : Config msg -> List (Html msg) -> ListItem msg
List item constructor
In addition to their text, list itemss may optionally contain a starting tile referred to as graphic.
Common examples for graphics are icons and images, avatar images and selection controls such as checkboxes.
ListItem.listItem ListItem.config
[ ListItem.graphic [] [ Icon.icon Icon.config "star" ]
, text "List item"
]
graphic : List (Html.Attribute msg) -> List (Html msg) -> Html msg
A list item's graphic tile
In addition to their text child, list items may optionally contain a starting tile referred to as meta.
Common examples for metas are text, icons and images and selection controls.
ListItem.listItem ListItem.config
[ text "List item"
, ListItem.meta [] [ Icon.icon Icon.config "star" ]
]
meta : List (Html.Attribute msg) -> List (Html msg) -> Html msg
A list item's meta tile
List items may be two-line list items by using text
.
ListItem.listItem ListItem.config
[ ListItem.text []
{ primary = [ text "First line" ]
, secondary = [ text "Second line" ]
}
]
text : List (Html.Attribute msg) -> { primary : List (Html msg), secondary : List (Html msg) } -> Html msg
Two-line list item's text
List items may be disabled by setting their setDisabled
configuration option
to True
.
ListItem.listItem
(ListItem.config |> ListItem.setDisabled True)
[ text "List item" ]
List items may be selected by setting their setSelected
configuration option
to a value of Selection
.
A list item that may change its selection state within the current page, should be selected rather than activated.
As a rule of thumb, a navigation list item should be activated, while any other list item should be selected.
ListItem.listItem
(ListItem.config
|> ListItem.setSelected (Just ListItem.selected)
)
[ text "List item" ]
Internal.Selection
Selection of a list item
A list item may be either in selected or in activated selection state.
selected : Selection
Selected selection state
List items may be activated by setting their setSelected
configuration option
to a value of Selection
.
A list item that may not change its state within the current page should be activated rather than selected.
As a rule of thumb, a navigation list item should be activated, while any other list item should be selected.
ListItem.listItem
(ListItem.config
|> ListItem.setSelected (Just ListItem.activated)
)
[ text "List item" ]
activated : Selection
Activated selection state
List items may using the setHref
configuration option in which case the list
item essentially behaves like a HTML anchor element. You may specify the
configuration option setTarget
as well.
ListItem.listItem
(ListItem.config
|> ListItem.setHref (Just "https://elm-lang.org")
)
[ text "Elm programming language" ]
Note that link list items cannot be disabled.