Lists are continuous, vertical indexes of text or images.
This module concerns the container list. If you are looking for information about the list items, refer to Material.List.Item.
import Material.List as List
import Material.List.Item as ListItem
main =
List.list List.config
(ListItem.listItem ListItem.config
[ text "Line item" ]
)
[ ListItem.listItem ListItem.config
[ text "Line item" ]
]
Configuration of a list
config : Config msg
Default configuration of a list
setDense : Basics.Bool -> Config msg -> Config msg
Specify whether a list should be dense
Dense lists are more compact and feature smaller than normal margins
setAvatarList : Basics.Bool -> Config msg -> Config msg
Specify whether a list should be an avatar list
An avatar list features a larger than usual list item graphic.
setTwoLine : Basics.Bool -> Config msg -> Config msg
Specify whether a list should be a two line list
Two line lists feature list items with a primary and a secondary text line.
setAttributes : List (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
setWrapFocus : Basics.Bool -> Config msg -> Config msg
Specify whether a list should wrap focus
A list that wraps focus focuses the first list item after pressing tab on the last list item. By default, a list in that case passes focus to the next focusable control.
setInteractive : Basics.Bool -> Config msg -> Config msg
Specify whether a list should be non-interactive
Non-interactive lists do not feature keyboard interaction and list items have no visual interaction effect.
setRipples : Basics.Bool -> Config msg -> Config msg
Specify whether a list items should have a ripple effect
By default list items have a ripple effect. To make list items not have a ripple effect, set this option to False
.
list : Config msg -> Item.ListItem msg -> List (Item.ListItem msg) -> Html msg
List view function
The list view function takes its list items as two arguments. The first argument represents the first list item, and the second argument reresents the remaining list items. This way we guarantee lists to be non-empty.
Lists may be two-line lists by setting its setTwoLine
configuration option
to True
. In that case, list items should wrap their contents inside
ListItem.text
.
List.list (List.config |> List.setTwoLine True)
(ListItem.listItem ListItem.config
[ ListItem.text []
{ primary = [ text "First line" ]
, secondary = [ text "Second line" ]
}
]
)
[]
Lists may be non-rippling by its setting setRipples
configuration
option to False
.
List.list
(List.config |> List.setRipples False)
(ListItem.listItem ListItem.config [ text "List item" ])
[]
Lists may be non-interactive by its setting setInteractive
configuration
option to False
.
Non-interactive lists do not feature keyboard interaction and list items have no visual interaction effect.
List.list
(List.config |> List.setInteractive False)
(ListItem.listItem ListItem.config [ text "List item" ])
[]
Lists may be styled more compact by setting its setDense
configuration option
to True
.
Dense lists feature smaller than normal margins.
List.list
(List.config |> List.setDense True)
(ListItem.listItem ListItem.config [ text "List item" ])
[]
A list item's graphics may be configured to appear larger by setting its
setAvatarList
configuration option to True
.
List.list
(List.config |> List.setAvatarList True)
(ListItem.listItem ListItem.config
[ ListItem.graphic [] [ Html.img [] [] ]
, text "List item"
]
)
[]
Multiple related lists, such as folders and files in a file hierarchy, may be
grouped using group
and labeled by subheader
.
List.group []
[ List.subheader [] [ text "Folders" ]
, List.list List.config
(ListItem.listItem ListItem.config [ text "Folder" ])
[ ListItem.listItem ListItem.config [ text "Folder" ] ]
, List.subheader [] [ text "Files" ]
, List.list List.config
(ListItem.listItem ListItem.config [ text "File" ])
[ ListItem.listItem ListItem.config [ text "File" ] ]
]
group : List (Html.Attribute msg) -> List (Html msg) -> Html msg
List group view function
subheader : List (Html.Attribute msg) -> List (Html msg) -> Html msg
List group subheader view function
You may programatically focus a list by assigning an id attribute to it and use
Browser.Dom.focus
.
List.list
(List.config
|> List.setAttributes
[ Html.Attributes.id "my-list" ]
)
(ListItem.listItem ListItem.config [ text "Line item" ])