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
• Configuration
  • Configuration Options
• List
• Two-Line List
• Non-interactive List
• Dense List
• Avatar List
• List Group
  • List Group Divider
• Focus a List

Resources

• Demo: Lists
• Material Design Guidelines: Lists
• MDC Web: List
• Sass Mixins (MDC Web)

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

Configuration Options

List

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-interactive List

Lists may be non-interactive by its setting setNonInteractive configuration option to True.

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

List.list
    (List.config |> List.setNonInteractive True)
    [ 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" ]
        ]
    ]

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