frandibar/elm-bootstrap/1.0.1

NOTE: this package is not compatible with Elm 0.19.1

Bootstrap.ButtonGroup

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

Button group

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

Create a button than can be composed in a button group

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

Create a linkButton that can be composed in a button group

radioButton : Bool -> List (Option msg) -> List (Html msg) -> RadioButtonItem msg

Create a radioButton that can be composed in a button group

Bool
-> List (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

Opaque type representing a link button, for composing button groups

Opaque type representing a radio button, for composing button groups

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 (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 (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


    ]
  • attributes List of attributes to customize the toolbar element
  • items List of button group (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