alexanderkiel / elm-mdc-alpha / Material.List

Lists are continuous, vertical indexes of text or images.

Install

In your application install:

npm install "

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