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.

input - The input for the input group

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

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

addons List of add-ons
config View configuration for Input group (so far)

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

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

addons List of add-ons
config View configuration for Input group (so far)

text : List (Option msg) -> Input msg

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

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

Create a button add-on.

options List of button options
children LIst of child elements

splitDropdown :

State

-> { toggleMsg : State -> msg

, toggleButton : SplitDropdownToggle msg

, options : List (DropdownOption msg)

, items : List (DropdownItem msg)

}

-> Addon msg

Create a split dropdown add-on.

For details see the Bootstrap.Dropdown module.

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

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

attributes - List of attributes
children - List of child elements

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 (Option msg) -> Input msg

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

datetimeLocal : List (Option msg) -> Input msg

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

date : List (Option msg) -> Input msg

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

month : List (Option msg) -> Input msg

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

time : List (Option msg) -> Input msg

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

week : List (Option msg) -> Input msg

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

number : List (Option msg) -> Input msg

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

email : List (Option msg) -> Input msg

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

url : List (Option msg) -> Input msg

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

search : List (Option msg) -> Input msg

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

tel : List (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 (Attribute msg) -> Config msg -> Config msg

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

frandibar/elm-bootstrap/2.1.0

Bootstrap.Form.InputGroup

General

Additional input flavors

Sizing

Further customization

Modules