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" ]
]Default configuration of a list item
Specify a message when the user interacts with the list item
Specify whtehr a list item should be disabled
Disabled list items cannot be interacted with and have not visual interaction effect.
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.
Specify whether a list item is a link list item
Link list items essentially behave like a HTML5 anchor element.
Specify a link list item's HTML5 target attribute
Note that non-link list items ignore this configuration option.
Specify additional attributes
List item type
List items can only be rendered within a list container.
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"
]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" ]
]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" ]
}
]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" ]Selection of a list item
A list item may be either in selected or in activated selection state.
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 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.
Configuration of a list item