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

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

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


type Config msg

Configuration of a list item divider

config : Config msg

Default configuration of a list item divider

Configuration Options

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

Specify whether a list divider should be padded

Padded list item dividers do not intersect a list item's avatar.

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

Specify whether a list divider should be inset

Insert list item dividers to not intersect a list item's meta.

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

Specify additional attributes

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

listItem : Config msg -> Material.List.Item.ListItem msg

List item divider view function

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

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

List group divider view function