Lists are continuous, vertical indexes of text or images.

Table of Contents

• Resources
• Basic Usage
• List
• List Item
• List Variants
  • Two-Line List
  • Non-interactive List
  • Dense List
  • Avatar List
  • List Group
    • List Group Divider
• List Item Variants
  • List Item with Graphic
  • List Item with Meta
  • Disabled List Item
  • Selected List Item
  • Activated List Item
  • Link List Item
  • List Item Divider

Resources

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

Basic Usage

import Material.List
    exposing
        ( list
        , listConfig
        , listItem
        , listItemConfig
        )


main =
    list listConfig
        [ listItem listItemConfig [ text "Line item" ]
        , listItem listItemConfig [ text "Line item" ]
        ]

List

List Item

List Variants

Two-Line List

Lists may be two-line lists by settings the twoLine configuration field to True. In that case, list items should wrap their contents inside listItemText and their first line in listItemPrimaryText and their second line in listItemSecondaryText.

list { listConfig | twoLine = True }
    [ listItem listItemConfig
        [ listItemText []
            [ listItemPrimaryText []
                [ text "First line" ]
            , listItemSecondaryText []
                [ text "Second line" ]
            ]
        ]
    ]

Non-interactive List

Lists may be non-interactive by setting the nonInteractive configuration field to True.

list { listConfig | nonInteractive = True }
    [ listItem listItemConfig [ text "List item" ] ]

Dense List

Lists may be styled more compact by setting the dense configuration field to True.

list { listConfig | dense = True }
    [ listItem listItemConfig [ text "List item" ] ]

Avatar List

List item's graphics may be configured to appear larger by setting the avatarList configuration field to True.

This is particularly useful when a list item's graphic includes an image rather than an icon.

list { listConfig | dense = True }
    [ listItem listItemConfig
        [ listItemGraphic [] [ Html.img [] [] ]
        , text "List item"
        ]
    ]

List Group

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

listGroup []
    [ listGroupSubheader [] [ text "Folders" ]
    , list listConfig
        [ listItem [] [ text "Folder" ]
        , listItem [] [ text "Folder" ]
        ]
    , listGroupSubheader [] [ text "Files" ]
    , list listConfig
        [ listItem [] [ text "File" ]
        , listItem [] [ text "File" ]
        ]
    ]

List Group Divider

Multiple lists within a group may be visually seperated by a list group divider.

listGroup []
    [ list listConfig
        [ listItem [] [ text "Folder" ]
        , listItem [] [ text "Folder" ]
        ]
    , listGroupDivider []
    , list listConfig
        [ listItem [] [ text "File" ]
        , listItem [] [ text "File" ]
        ]
    ]

List Item Variants

In addition to their text child, lists may optionally contain a starting tile referred to as graphic and/ or a last tile referred to as meta.

List Item with Graphic

Common examples for graphics are icons and images, avatar images and selection controls such as checkboxes.

listItem listItemConf
    [ listItemGraphic [] [ icon iconConf "star" ]
    , text "List item"
    ]

List Item with Meta

Common examples for metas are text, icons and images and selection controls.

listItem listItemConf
    [ text "List item"
    , listItemMeta [] [ icon iconConf "star" ]
    ]

Disabled List Item

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

listItem { listItemConf | disabled = True }
    [ text "List item" ]

Selected List Item

List items may be disabled by setting their selected configuration field to True.

listItem { listItemConf | selected = True }
    [ text "List item" ]

Activated List Item

List items may be disabled by setting their activated configuration field to True.

listItem { listItemConf | activated = True }
    [ text "List item" ]

Link List Item

List items may specify the href attribute in which case the list item essentially behaves like a HTML a element. You may specify the configuration target target as well.

listItem [ href "https://elm-lang.org" ]
    [ text "Elm programming language" ]

Note that link list items cannot be disabled.

List Item Divider

List items may be seperated by a divider. The divider may optionally be inset so that it does not intersect the list item's graphic, or padded so that it does not intersect the list item's meta.

list listConfig
    [ listItem [] [ text "List item" ]
    , listItemDivider listItemDividerConfig
    , listItem [] [ text "List item" ]
    ]