Lists are continuous, vertical indexes of text or images.

This module concerns a list's divider elements. If you are looking for the list container, refer to Material.List, and if you are looking for the list item, refer to Material.List.Item.

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• List Item Divider
• List Group Divider

Resources

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

Basic Usage

import Material.List as List
import Material.List.Divider as ListDivider
import Material.List.Item as ListItem


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

Configuration

Configuration Options

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.list List.config
    [ ListItem.listItem ListItem.config
        [ text "List item" ]
    , ListDivider.listItem ListDivider.config
    , ListItem.listItem ListItem.config
        [ text "List item" ]
    ]

List Group Divider

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

List.group []
    [ List.list List.config
        [ ListItem.listItem ListItem.config [ text "Folder" ]
        , ListItem.listItem ListItem.config [ text "Folder" ]
        ]
    , ListDivider.group []
    , List.list List.config
        [ ListItem.listItem ListItem.config [ text "File" ]
        , ListItem.listItem ListItem.config [ text "File" ]
        ]
    ]