alexanderkiel/elm-mdc-alpha/1.4.0

Material.List

Lists are continuous, vertical indexes of text or images.

Install

In your application install:

npm install "@material/list"

In your Sass file import:

@import "@material/list/mdc-list";

View

view : List (Property msg) -> List ( String, Html msg ) -> Html msg

Renders a list. Childs have to be keyed.

item : List (Property msg) -> List (Html msg) -> Html msg

Renders a list item.

text : List (Property msg) -> List (Html msg) -> Html msg

Use for text inside items.

primaryText : List (Property msg) -> List (Html msg) -> Html msg

Use for two-line text inside items additionally to text.

Example:


    text []
        [ primaryText [] [ Html.text "foo" ]
        , secondaryText [] [ Html.text "bar" ]
        ]
secondaryText : List (Property msg) -> List (Html msg) -> Html msg

Use for two-line text inside items additionally to text.

Example:


    text []
        [ primaryText [] [ Html.text "foo" ]
        , secondaryText [] [ Html.text "bar" ]
        ]

List Groups

group : List (Property msg) -> List (Html msg) -> Html msg

List groups.

Example:


    group []
        [ subheader [] [ Html.text "foo" ]
        , view []
            [ item [] []
            , item [] []
            ]
        ]
subheader : String -> Html msg

Header inside list groups.

Properties

twoLine : Property msg

Add to lists with two lines.

graphic : Property msg

Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image.

meta : Property msg

Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image.

Reference