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
view : Config msg -> Html.Styled.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 grouppredecessors : List (Addon msg) -> Config msg -> Config msg
Specify a list of add-ons to display before the input.
addons
List of add-onsconfig
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-onsconfig
View configuration for Input group (so far)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.Styled.Html msg) -> Addon msg
Create a button add-on.
options
List of button optionschildren
LIst of child elementsdropdown : 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.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Addon msg
Create a simple span add-on. Great for simple texts or font icons
attributes
- List of attributeschildren
- List of child elementsOpaque representation of the view configuration for an input group.
Opaque representation of an input element.
Opaque representation of an input-group add-on element.
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"
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
attrs : List (Html.Styled.Attribute msg) -> Config msg -> Config msg
When you need to customize the input group container, use this function to provide customization attributes.