Bootstrap.ListGroup

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

Simple lists

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.

type alias Item msg =

Item msg

Opaque type representing a list item in a ul based list group

Custom lists

custom : List (CustomItem msg) -> Html msg

Create a custom List group

ListGroup.custom
    [ ListGroup.button
        [ ListGroup.attrs [ onClick "MyItem1Msg" ]
        , ListGroup.info
        ]
        [ text "List item 1" ]
    , ListGroup.button
        [ ListGroup.attrs [ 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 item
children List of child elements

button : 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 item
children List of child elements

type alias CustomItem msg =

CustomItem msg

Opaque type representing an item in a custom list group

Options

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 (Attribute msg) -> ItemOption msg

Use this function to supply any additional Hmtl.Attribute you need for your list items

type alias ItemOption msg =

ItemOption msg

Opaque type representing configuration options for a list item

nixCodeX/elm-bootstrap/2.0.2

Bootstrap.ListGroup

Simple lists

Custom lists

Options

Modules