nixCodeX / elm-bootstrap / Bootstrap.Form.InputGroup

Easily extend form input controls by adding text and buttons.

import Bootstrap.Form.InputGroup as InputGroup
import Bootstrap.Form.Input as Input
import Bootstrap.Button as Button


InputGroup.config
    ( InputGroup.text [] )
    |> InputGroup.large
    |> InputGroup.predecessors
        [ InputGroup.span [] [ text "Stuff" ] ]
    |> InputGroup.successors
        [ InputGroup.button [] [ text "DoIt!"] ]
    |> InputGroup.view

General

view : Config msg -> Html msg

Create the view representation for an Input group based on a Config

config : Input msg -> Config msg

Create initial view configuration for an input group.

predecessors : List (Addon msg) -> Config msg -> Config msg

Specify a list of add-ons to display before the input.

successors : List (Addon msg) -> Config msg -> Config msg

Specify a list of add-ons to display after the input.

text : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="text"

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

Create a button add-on.

dropdown : Bootstrap.Dropdown.State -> { toggleMsg : Bootstrap.Dropdown.State -> msg, toggleButton : Bootstrap.Dropdown.DropdownToggle msg, options : List (Bootstrap.Dropdown.DropdownOption msg), items : List (Bootstrap.Dropdown.DropdownItem msg) } -> Addon msg

Create a dropdown add-on.

For details see the Bootstrap.Dropdown module.

splitDropdown : Bootstrap.Dropdown.State -> { toggleMsg : Bootstrap.Dropdown.State -> msg, toggleButton : Bootstrap.Dropdown.SplitDropdownToggle msg, options : List (Bootstrap.Dropdown.DropdownOption msg), items : List (Bootstrap.Dropdown.DropdownItem msg) } -> Addon msg

Create a split dropdown add-on.

For details see the Bootstrap.Dropdown module.

span : List (Html.Attribute msg) -> List (Html msg) -> Addon msg

Create a simple span add-on. Great for simple texts or font icons


type Config msg

Opaque representation of the view configuration for an input group.


type Input msg

Opaque representation of an input element.


type Addon msg

Opaque representation of an input-group add-on element.

Additional input flavors

password : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="password"

datetimeLocal : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="datetime-local"

date : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="date"

month : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="month"

time : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="time"

week : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="week"

number : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="number"

email : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="email"

url : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="url"

search : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="search"

tel : List (Bootstrap.Form.Input.Option msg) -> Input msg

Create an input add-on with type="tel"

Sizing

large : Config msg -> Config msg

Make all controls in an input group large

small : Config msg -> Config msg

Make all controls in an input group small

Further customization

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

When you need to customize the input group container, use this function to provide customization attributes.