aforemny / material-components-web-elm / Material.List.Item

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.

Table of Contents

Resources

Basic Usage

import Material.List as List
import Material.List.Item as ListItem

main =
    List.list List.config
        [ ListItem.listItem ListItem.config
            [ text "Line item" ]
        ]

Configuration


type alias Config msg =
Internal.Config msg

Configuration of a list item

config : Config msg

Default configuration of a list item

Configuration Options

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

List Item


type alias ListItem msg =
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

List Item with Graphic

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

List Item with Meta

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

Two-Line List Item

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

Disabled List Item

List items may be disabled by setting their setDisabled configuration option to True.

ListItem.listItem
    (ListItem.config |> ListItem.setDisabled True)
    [ text "List item" ]

Selected 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" ]


type alias Selection =
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

Activated List Item

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

Link List Item

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.