List groups are a flexible and powerful component for displaying a series of content. List group items can be modified and extended to support just about any content within. They can also be used as navigation with the right modifier class
ul : List (Item msg) -> Html msg
A simple list group based on a ul element
ListGroup.ul
[ ListGroup.li [ ListGroup.active ] [ text "Item 1" ]
, ListGroup.li [] [ text "Item 2" ]
]
li : List (ItemOption msg) -> List (Html msg) -> Item msg
Composable li element for a ul based list group
keyedUl : List ( String, Item msg ) -> Html msg
Create a ul list group with keyed children.
Bootstrap.Internal.ListGroup.Item msg
Opaque type representing a list item in a ul based list group
custom : List (CustomItem msg) -> Html msg
Create a custom List group
ListGroup.custom
[ ListGroup.button
[ ListGroup.attr <| onClick "MyItem1Msg"
, ListGroup.info
]
[ text "List item 1" ]
, ListGroup.button
[ ListGroup.attr <| onClick "MyItem2Msg"
, ListGroup.warning
]
[ text "List item 2" ]
]
keyedCustom : List ( String, CustomItem msg ) -> Html msg
Create a custom list group with keyed children.
anchor : List (ItemOption msg) -> List (Html msg) -> CustomItem msg
Create a composable anchor list item for use in a custom list
options
List of options to configure the list itemchildren
List of child elementsbutton : List (ItemOption msg) -> List (Html msg) -> CustomItem msg
Create a composable button list item for use in a custom list
options
List of options to configure the list itemchildren
List of child elementsBootstrap.Internal.ListGroup.CustomItem msg
Opaque type representing an item in a custom list group
primary : ItemOption msg
Option to style a list item with primary colors
secondary : ItemOption msg
Option to style a list item with secondary colors
success : ItemOption msg
Option to style a list item with success colors
info : ItemOption msg
Option to style a list item with info colors
warning : ItemOption msg
Option to style a list item with warning colors
danger : ItemOption msg
Option to style a list item with danger colors
light : ItemOption msg
Option to style a list item with light colors
dark : ItemOption msg
Option to style a list item with dark colors
active : ItemOption msg
Option to mark a list item as active
disabled : ItemOption msg
Option to disable a list item
attrs : List (Html.Attribute msg) -> ItemOption msg
Use this function to supply any additional Hmtl.Attribute you need for your list items
Bootstrap.Internal.ListGroup.ItemOption msg
Opaque type representing configuration options for a list item