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

Lists are continuous, vertical indexes of text or images.

This module concerns the container list. If you are looking for information about the list items, refer to Material.List.Item.

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" ]
        )
        [ ListItem.listItem ListItem.config
            [ text "Line item" ]
        ]

Configuration


type Config msg

Configuration of a list

config : Config msg

Default configuration of a list

Configuration Options

setDense : Basics.Bool -> Config msg -> Config msg

Specify whether a list should be dense

Dense lists are more compact and feature smaller than normal margins

setAvatarList : Basics.Bool -> Config msg -> Config msg

Specify whether a list should be an avatar list

An avatar list features a larger than usual list item graphic.

setTwoLine : Basics.Bool -> Config msg -> Config msg

Specify whether a list should be a two line list

Two line lists feature list items with a primary and a secondary text line.

setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg

Specify additional attributes

setWrapFocus : Basics.Bool -> Config msg -> Config msg

Specify whether a list should wrap focus

A list that wraps focus focuses the first list item after pressing tab on the last list item. By default, a list in that case passes focus to the next focusable control.

setInteractive : Basics.Bool -> Config msg -> Config msg

Specify whether a list should be non-interactive

Non-interactive lists do not feature keyboard interaction and list items have no visual interaction effect.

setRipples : Basics.Bool -> Config msg -> Config msg

Specify whether a list items should have a ripple effect

By default list items have a ripple effect. To make list items not have a ripple effect, set this option to False.

List

list : Config msg -> Item.ListItem msg -> List (Item.ListItem msg) -> Html msg

List view function

The list view function takes its list items as two arguments. The first argument represents the first list item, and the second argument reresents the remaining list items. This way we guarantee lists to be non-empty.

Two-Line List

Lists may be two-line lists by setting its setTwoLine configuration option to True. In that case, list items should wrap their contents inside ListItem.text.

List.list (List.config |> List.setTwoLine True)
    (ListItem.listItem ListItem.config
        [ ListItem.text []
            { primary = [ text "First line" ]
            , secondary = [ text "Second line" ]
            }
        ]
    )
    []

Non-ripple List

Lists may be non-rippling by its setting setRipples configuration option to False.

List.list
    (List.config |> List.setRipples False)
    (ListItem.listItem ListItem.config [ text "List item" ])
    []

Non-interactive List

Lists may be non-interactive by its setting setInteractive configuration option to False.

Non-interactive lists do not feature keyboard interaction and list items have no visual interaction effect.

List.list
    (List.config |> List.setInteractive False)
    (ListItem.listItem ListItem.config [ text "List item" ])
    []

Dense List

Lists may be styled more compact by setting its setDense configuration option to True.

Dense lists feature smaller than normal margins.

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

Avatar List

A list item's graphics may be configured to appear larger by setting its setAvatarList configuration option to True.

List.list
    (List.config |> List.setAvatarList True)
    (ListItem.listItem ListItem.config
        [ ListItem.graphic [] [ Html.img [] [] ]
        , text "List item"
        ]
    )
    []

List Group

Multiple related lists, such as folders and files in a file hierarchy, may be grouped using group and labeled by subheader.

List.group []
    [ List.subheader [] [ text "Folders" ]
    , List.list List.config
        (ListItem.listItem ListItem.config [ text "Folder" ])
        [ ListItem.listItem ListItem.config [ text "Folder" ] ]
    , List.subheader [] [ text "Files" ]
    , List.list List.config
        (ListItem.listItem ListItem.config [ text "File" ])
        [ ListItem.listItem ListItem.config [ text "File" ] ]
    ]

group : List (Html.Attribute msg) -> List (Html msg) -> Html msg

List group view function

subheader : List (Html.Attribute msg) -> List (Html msg) -> Html msg

List group subheader view function

Focus a List

You may programatically focus a list by assigning an id attribute to it and use Browser.Dom.focus.

List.list
    (List.config
        |> List.setAttributes
            [ Html.Attributes.id "my-list" ]
    )
    (ListItem.listItem ListItem.config [ text "Line item" ])