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
Create the view representation for an Input group based on a [´configuration`](#Config)
Create initial view configuration for an input group.
input
- The input for the input groupSpecify a list of add-ons to display before the input.
addons
List of add-onsconfig
View configuration for Input group (so far)Specify a list of add-ons to display after the input.
addons
List of add-onsconfig
View configuration for Input group (so far)Create an input add-on with type="text"
Create a button add-on.
options
List of button optionschildren
LIst of child elementsCreate a dropdown add-on.
For details see the Bootstrap.Dropdown
module.
Create a split dropdown add-on.
For details see the Bootstrap.Dropdown
module.
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.
Create an input add-on with type="password"
Create an input add-on with type="datetime-local"
Create an input add-on with type="date"
Create an input add-on with type="month"
Create an input add-on with type="time"
Create an input add-on with type="week"
Create an input add-on with type="number"
Create an input add-on with type="email"
Create an input add-on with type="url"
Create an input add-on with type="search"
Create an input add-on with type="tel"
Make all controls in an input group large
Make all controls in an input group small
When you need to customize the input group container, use this function to provide customization attributes.
module Bootstrap.Form.InputGroup
exposing
( view
, config
, predecessors
, successors
, text
, password
, datetimeLocal
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, button
, dropdown
, splitDropdown
, span
, large
, small
, attrs
, Config
, Input
, Addon
)
{-| 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
@docs view, config, predecessors, successors, text, button, dropdown, splitDropdown, span, Config, Input, Addon
# Additional input flavors
@docs password, datetimeLocal, date, month, time, week, number, email, url, search, tel
# Sizing
@docs large, small
# Further customization
@docs attrs
-}
import Html
import Html.Attributes as Attributes
import Bootstrap.General.Internal exposing (ScreenSize(..), screenSizeOption)
import Bootstrap.Button as Button
import Bootstrap.Form.Input as Input
import Bootstrap.Dropdown as Dropdown
{-| Opaque representation of the view configuration for an input group.
-}
type Config msg
= Config
{ input : Input msg
, predecessors : List (Addon msg)
, successors : List (Addon msg)
, size : Maybe ScreenSize
, attributes : List (Html.Attribute msg)
}
{-| Opaque representation of an input element.
-}
type Input msg
= Input (Html.Html msg)
{-| Opaque representation of an input-group add-on element.
-}
type Addon msg
= Addon (Html.Html msg)
{-| Create initial view configuration for an input group.
- `input` - The input for the input group
-}
config : Input msg -> Config msg
config input =
Config
{ input = input
, predecessors = []
, successors = []
, size = Nothing
, attributes = []
}
{-| Create the view representation for an Input group based on
a [´configuration`](#Config)
-}
view : Config msg -> Html.Html msg
view (Config config) =
let
(Input input) =
config.input
in
Html.div
([ Attributes.class "input-group" ]
++ ([ Maybe.andThen sizeAttribute config.size ]
|> List.filterMap identity
)
++ config.attributes
)
(List.map
(\(Addon e) -> Html.div [ Attributes.class "input-group-prepend" ] [ e ])
config.predecessors
++ [ input ]
++ List.map
(\(Addon e) -> Html.div [ Attributes.class "input-group-append" ] [ e ])
config.successors
)
{-| Specify a list of add-ons to display before the input.
- `addons` List of add-ons
- `config` View configuration for Input group (so far)
-}
predecessors :
List (Addon msg)
-> Config msg
-> Config msg
predecessors addons (Config config) =
Config
{ config | predecessors = addons }
{-| Specify a list of add-ons to display after the input.
- `addons` List of add-ons
- `config` View configuration for Input group (so far)
-}
successors :
List (Addon msg)
-> Config msg
-> Config msg
successors addons (Config config) =
Config
{ config | successors = addons }
{-| Create a simple span add-on. Great for simple texts or font icons
- `attributes` - List of attributes
- `children` - List of child elements
-}
span : List (Html.Attribute msg) -> List (Html.Html msg) -> Addon msg
span attributes children =
Html.span
(Attributes.class "input-group-text" :: attributes)
children
|> Addon
{-| Create a button add-on.
- `options` List of button options
- `children` LIst of child elements
-}
button :
List (Button.Option msg)
-> List (Html.Html msg)
-> Addon msg
button options children =
Button.button options children
|> Addon
{-| Create a dropdown add-on.
For details see the [`Bootstrap.Dropdown`](Bootstrap-Dropdown) module.
-}
dropdown :
Dropdown.State
->
{ toggleMsg : Dropdown.State -> msg
, toggleButton : Dropdown.DropdownToggle msg
, options : List (Dropdown.DropdownOption msg)
, items : List (Dropdown.DropdownItem msg)
}
-> Addon msg
dropdown state config =
Dropdown.dropdown state config
|> Addon
{-| Create a split dropdown add-on.
For details see the [`Bootstrap.Dropdown`](Bootstrap-Dropdown) module.
-}
splitDropdown :
Dropdown.State
->
{ toggleMsg : Dropdown.State -> msg
, toggleButton : Dropdown.SplitDropdownToggle msg
, options : List (Dropdown.DropdownOption msg)
, items : List (Dropdown.DropdownItem msg)
}
-> Addon msg
splitDropdown state config =
Dropdown.splitDropdown state config
|> Addon
{-| Create an input add-on with type="text"
-}
text : List (Input.Option msg) -> Input msg
text =
input Input.text
{-| Create an input add-on with type="password"
-}
password : List (Input.Option msg) -> Input msg
password =
input Input.password
{-| Create an input add-on with type="datetime-local"
-}
datetimeLocal : List (Input.Option msg) -> Input msg
datetimeLocal =
input Input.datetimeLocal
{-| Create an input add-on with type="date"
-}
date : List (Input.Option msg) -> Input msg
date =
input Input.date
{-| Create an input add-on with type="month"
-}
month : List (Input.Option msg) -> Input msg
month =
input Input.month
{-| Create an input add-on with type="time"
-}
time : List (Input.Option msg) -> Input msg
time =
input Input.time
{-| Create an input add-on with type="week"
-}
week : List (Input.Option msg) -> Input msg
week =
input Input.week
{-| Create an input add-on with type="number"
-}
number : List (Input.Option msg) -> Input msg
number =
input Input.number
{-| Create an input add-on with type="email"
-}
email : List (Input.Option msg) -> Input msg
email =
input Input.email
{-| Create an input add-on with type="url"
-}
url : List (Input.Option msg) -> Input msg
url =
input Input.url
{-| Create an input add-on with type="search"
-}
search : List (Input.Option msg) -> Input msg
search =
input Input.search
{-| Create an input add-on with type="tel"
-}
tel : List (Input.Option msg) -> Input msg
tel =
input Input.tel
input :
(List (Input.Option msg) -> Html.Html msg)
-> List (Input.Option msg)
-> Input msg
input inputFn options =
inputFn options |> Input
{-| Make all controls in an input group large
-}
large : Config msg -> Config msg
large (Config config) =
Config
{ config | size = Just LG }
{-| Make all controls in an input group small
-}
small : Config msg -> Config msg
small (Config config) =
Config
{ config | size = Just SM }
{-| When you need to customize the input group container, use this function to provide customization attributes.
-}
attrs : List (Html.Attribute msg) -> Config msg -> Config msg
attrs attributes (Config config) =
Config
{ config | attributes = attributes }
sizeAttribute : ScreenSize -> Maybe (Html.Attribute msg)
sizeAttribute size =
Maybe.map
(\s -> Attributes.class <| "input-group-" ++ s)
(screenSizeOption size)