Basics.Bool
Html.Styled.Html msg
field : List (Html.Styled.Attribute msg) -> List (Control msg) -> Field msg
Fields are containers for Controls.
Usually this will be a single control
, with optional an label
and help
.
import Bulma.Form
exposing
( controlInput
, controlModifiers
, field
, help
, label
)
myField : Html msg
myField =
field []
[ controlLabel [] []
, controlInput myControlInputModifiers [] [] []
, controlHelp Default [] []
]
Html.Styled.Html msg
{ loading : Maybe Bulma.Styled.Modifiers.Internal.Size
, expanded : Basics.Bool
, iconLeft : Maybe ( Bulma.Styled.Modifiers.Internal.Size
, List (Html.Styled.Attribute msg)
, Bulma.Styled.Elements.IconBody msg )
, iconRight : Maybe ( Bulma.Styled.Modifiers.Internal.Size
, List (Html.Styled.Attribute msg)
, Bulma.Styled.Elements.IconBody msg )
}
controlModifiers : ControlModifiers msg
control : ControlModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Controls are containers for singlular form controls. They can only contain the folling elements:
label
(for radio and checkbox)input
select
button
icon
You really shouldn't need to use this function.
controlLabel
, controlButton
, controlInput
, etc. should be everything you need.
{ size : Bulma.Styled.Modifiers.Internal.Size
, state : Bulma.Styled.Modifiers.Internal.State
, color : Bulma.Styled.Modifiers.Internal.Color
, expanded : Basics.Bool
, rounded : Basics.Bool
, readonly : Basics.Bool
, disabled : Basics.Bool
, iconLeft : Maybe ( Bulma.Styled.Modifiers.Internal.Size
, List (Html.Styled.Attribute msg)
, Bulma.Styled.Elements.IconBody msg )
, iconRight : Maybe ( Bulma.Styled.Modifiers.Internal.Size
, List (Html.Styled.Attribute msg)
, Bulma.Styled.Elements.IconBody msg )
}
controlInputModifiers : ControlInputModifiers msg
controlInput : ControlInputModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
type Msg
= UpdateName String
myInput : Html Msg
myInput =
let
myControlAttrs : List (Attribute Msg)
myControlAttrs =
[]
myInputAttrs : List (Attribute Msg)
myInputAttrs =
[ onInput UpdateName
, placeholder "Name"
]
in
controlInput myControlInputModifiers
myControlAttrs
myInputAttrs
[]
controlText : ControlInputModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Just like controlInput
, but with the type="text"
attribute added to the input.
controlPassword : ControlInputModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Just like controlInput
, but with the type="password"
attribute added to the input.
controlEmail : ControlInputModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Just like controlInput
, but with the type="email"
attribute added to the input.
controlPhone : ControlInputModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Just like controlInput
, but with the type="tel"
attribute added to the input.
{ size : Bulma.Styled.Modifiers.Internal.Size
, state : Bulma.Styled.Modifiers.Internal.State
, color : Bulma.Styled.Modifiers.Internal.Color
, readonly : Basics.Bool
, disabled : Basics.Bool
}
controlTextAreaModifiers : ControlTextAreaModifiers
controlTextArea : ControlTextAreaModifiers -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
type Msg
= UpdateDesc String
myTextArea : Html Msg
myTextArea =
let
myControlAttrs : List (Attribute Msg)
myControlAttrs =
[]
myTextAreaAttrs : List (Attribute Msg)
myTextAreaAttrs =
[ onInput UpdateDesc
, placeholder "Description"
]
in
controlTextArea myControlTextAreaModifiers
myControlAttrs
myTextAreaAttrs
[]
{ size : Bulma.Styled.Modifiers.Internal.Size
, state : Bulma.Styled.Modifiers.Internal.State
, color : Bulma.Styled.Modifiers.Internal.Color
, expanded : Basics.Bool
, iconLeft : Maybe ( Bulma.Styled.Modifiers.Internal.Size
, List (Html.Styled.Attribute msg)
, Bulma.Styled.Elements.IconBody msg )
}
controlSelectModifiers : ControlSelectModifiers msg
Html.Styled.Html msg
controlSelect : ControlSelectModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Option msg) -> Control msg
type Msg
= UpdateChoice String
myOption : ( String, String ) -> Html msg
myOption ( key, val ) =
option [ value val ]
[ text key
]
mySelect : Html Msg
mySelect =
let
myControlAttrs : List (Attribute Msg)
myControlAttrs =
[]
mySelectAttrs : List (Attribute Msg)
mySelectAttrs =
[ onInput UpdateChoice ]
in
controlSelect myControlModifiers
myControlAttrs
mySelectAttrs
<|
List.map myOption <|
[ ( "grow", "eat me" )
, ( "shrink", "drink me" )
]
controlSelectRounded : ControlSelectModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
A rounded variation of controlSelect
.
controlMultiselect : ControlSelectModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Option msg) -> Control msg
Accepts options just like controlSelect
, except it allows you to select multiple list items.
controlLabel : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Secretly the same thing as a label. This is just for consistency's sake.
myLabel : Html msg
myLabel =
controlLabel [] [ text "hello" ]
label : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
Just a simple label.
myLabel : Html msg
myLabel =
label [] [ text "hi" ]
controlCheckBox : IsDisabled -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
type Msg
= UpdateChoice Bool
myCheckBox : Html Msg
myCheckBox =
let
myControlAttrs : List (Attribute Msg)
myControlAttrs =
[]
myLabelAttrs : List (Attribute Msg)
myLabelAttrs =
[]
myCheckBoxAttrs : List (Attribute Msg)
myCheckBoxAttrs =
[ onCheck UpdateChoice ]
in
controlCheckBox False
myControlAttrs
myLabelAttrs
myCheckBoxAttrs
[ text "I don't agree to the terms and conditions"
]
Basics.Bool
Html.Styled.Html msg
controlRadio : List (Html.Styled.Attribute msg) -> List (RadioButton msg) -> Control msg
type Msg
= UpdateChoice String
myRadio : Html Msg
myRadio =
let
myControlAttrs : List (Attribute Msg)
myControlAttrs =
[]
myLabelAttrs : List (Attribute Msg)
myLabelAttrs =
[]
myRadioAttrs : List (Attribute Msg)
myRadioAttrs =
[ onInput UpdateChoice ]
in
controlRadio myControlAttrs
[ controlRadioButton False
False
"yes"
myLabelAttrs
(value "1" :: myRadioAttrs)
[ text "yep" ]
, controlRadioButton False
True
"no"
myLabelAttrs
(value "0" :: myRadioAttrs)
[ text "nope" ]
, controlRadioButton True
False
"maybe"
myLabelAttrs
(value "0" :: myRadioAttrs)
[ text "uhh" ]
]
controlRadioButton : IsDisabled -> IsChecked -> String -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> RadioButton msg
controlButton : Bulma.Styled.Elements.ButtonModifiers msg -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
type Msg
= DoSomething
myButton : Html Msg
myButton =
let
myControlAttrs : List (Attribute Msg)
myControlAttrs =
[]
myButtonAttrs : List (Attribute Msg)
myButtonAttrs =
[ onClick DoSomething ]
in
controlButton myButtonModifiers
myControlAttrs
myButtonAttrs
[ text "Click me!"
]
controlHelp : Bulma.Styled.Modifiers.Internal.Color -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Control msg
Secretly just help
. Created this just for consistency.
help : Bulma.Styled.Modifiers.Internal.Color -> List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Html.Styled.Html msg
import B.Modifiers exposing (Color(Danger))
myHelp : Html msg
myHelp =
help Danger
[]
[ text "This field is required."
]
Coming Soon!
fields : Bulma.Styled.Modifiers.Internal.HorizontalAlignment -> List (Html.Styled.Attribute msg) -> List (Control msg) -> Field msg
This is a container for gluing controls together on the same line. This variation will leave spaces between each control.
myFields : Html msg
myFields =
fields Right
[]
[ controlInput myControlInputModifiers [] [] []
, control myControlModifiers
[]
[ button myButtonModifiers [] []
]
]
connectedFields : Bulma.Styled.Modifiers.Internal.HorizontalAlignment -> List (Html.Styled.Attribute msg) -> List (Control msg) -> Field msg
This is a container for gluing controls together on the same line. This variation will connect them as "addons".
myFields : Html msg
myFields =
connectedFields Centered
[]
[ controlInput myControlInputModifiers [] [] []
, control myControlModifiers
[]
[ button myButtonModifiers [] []
]
]
multilineFields : List (Html.Styled.Attribute msg) -> List (Control msg) -> Field msg
This is a container for gluing controls together when you expect it to take up multiple lines.
myControlButton : String -> Html msg
myControlButton buttonText =
control myControlModifiers
[]
[ button myButtonModifiers
[]
[ text buttonText ]
]
myFields : Html msg
myFields =
multilineFields [] <|
List.map myControlButton <|
List.map toString <|
List.range 0 10
horizontalFields : List (Html.Styled.Attribute msg) -> List (HorizontalFieldPartition msg) -> Field msg
The horizontalFields
expects a fieldLabel
and a fieldBody
.
import B.Modifiers exposing (Size(Standard))
myFields : Html msg
myFields =
horizontalFields []
[ fieldLabel Standard
[]
[ label []
[ text "name"
]
]
, fieldBody []
[ field []
[ controlInput myControlInputModifiers [] [] []
]
, field []
[ controlInput myControlInputModifiers [] [] []
]
]
]
Html.Styled.Html msg
fieldLabel : Bulma.Styled.Modifiers.Internal.Size -> List (Html.Styled.Attribute msg) -> List (Control msg) -> HorizontalFieldPartition msg
fieldLabel
expects a Bulma label element.
import B.Form
exposing
( fieldLabel
, label
)
import B.Modifiers exposing (Size(Large))
myFieldLabel : Html msg
myFieldLabel =
fieldLabel Large
[]
[ label []
[ text "Email?"
]
]
fieldBody : List (Html.Styled.Attribute msg) -> List (Field msg) -> HorizontalFieldPartition msg
myFieldBody : Html msg
myFieldBody =
fieldBody []
[ field []
[ controlInput myControlInputModifiers [] [] []
]
, field []
[ controlInput myControlInputModifiers [] [] []
]
]