rundis / elm-bootstrap / Bootstrap.ButtonGroup

Group a series of buttons together on a single line with the button group.

Button group

button : List (Bootstrap.Button.Option msg) -> List (Html msg) -> ButtonItem msg

Create a button than can be composed in a button group

linkButton : List (Bootstrap.Button.Option msg) -> List (Html msg) -> LinkButtonItem msg

Create a linkButton that can be composed in a button group

radioButton : Basics.Bool -> List (Bootstrap.Button.Option msg) -> List (Html msg) -> RadioButtonItem msg

Create a radioButton that can be composed in a button group

checkboxButton : Basics.Bool -> List (Bootstrap.Button.Option msg) -> List (Html msg) -> CheckboxButtonItem msg

Create a checkboxButton that can be composed in a button group

buttonGroup : List (Option msg) -> List (ButtonItem msg) -> Html msg

Create a group of related buttons

ButtonGroup.buttonGroup
    [ ButtonGroup.small ]
    [ ButtonGroup.button [ Button.primary ] [ text "Primary" ]
    , ButtonGroup.button [ Button.secondary ] [ text "Secondary" ]
    ]

linkButtonGroup : List (Option msg) -> List (LinkButtonItem msg) -> Html msg

Create a group of related link buttons. Parameters are identical to buttonGroup

radioButtonGroup : List (Option msg) -> List (RadioButtonItem msg) -> Html msg

Create a group of mutually-exclusive radio buttons. Parameters are identical to buttonGroup

ButtonGroup.radioButtonGroup
    [ ButtonGroup.small ]
    [ ButtonGroup.radioButton True [ Button.primary ] [ text "On" ]
    , ButtonGroup.radioButton False [ Button.primary ] [ text "Off" ]
    ]

checkboxButtonGroup : List (Option msg) -> List (CheckboxButtonItem msg) -> Html msg

Create a group of related checkbox buttons. Parameters are identical to buttonGroup

ButtonGroup.checkboxButtonGroup
    [ ButtonGroup.small ]
    [ ButtonGroup.checkboxButton True [ Button.primary ] [ text "Bold" ]
    , ButtonGroup.checkboxButton True [ Button.primary ] [ text "Italic" ]
    ]


type ButtonItem msg

Opaque type representing a button, for composing button groups


type LinkButtonItem msg

Opaque type representing a link button, for composing button groups


type RadioButtonItem msg

Opaque type representing a radio button, for composing button groups


type CheckboxButtonItem msg

Opaque type representing a checkbox button, for composing button groups

Group options

small : Option msg

Option to make all buttons in the given group small

large : Option msg

Option to make all buttons in the given group large

vertical : Option msg

Option to make all buttons stack vertically for a button group

attrs : List (Html.Attribute msg) -> Option msg

When you need to customize the group element with standard Html.Attribute use this function to create it as a group option


type Option msg

Opaque type representing the possible styling options for a button group

Button toolbar

toolbar : List (Html.Attribute msg) -> List (GroupItem msg) -> Html msg

Create a toolbar of buttons by composing button groups. Separate groups by margins on the button groups.

ButtonGroup.toolbar []
    [ ButtonGroup.groupItem []
        []

    -- should contain a list of button items
    , ButtonGroup.groupItem
        [ Button.attrs [ class "ml-2" ] ]
        []

    -- should contain a list of button items
    ]

buttonGroupItem : List (Option msg) -> List (ButtonItem msg) -> GroupItem msg

Create a button group that can be composed in a toolbar

The parameters are identical as for buttonGroup

linkButtonGroupItem : List (Option msg) -> List (LinkButtonItem msg) -> GroupItem msg

The same as buttonGroupItem, but for link buttons

radioButtonGroupItem : List (Option msg) -> List (RadioButtonItem msg) -> GroupItem msg

The same as buttonGroupItem, but for radio buttons

checkboxButtonGroupItem : List (Option msg) -> List (CheckboxButtonItem msg) -> GroupItem msg

The same as buttonGroupItem, but for checkbox buttons


type GroupItem msg

Opaque type representing a button group. Used when composing a button toolbar