Basics.Bool
Html msg
field : List (Html.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 ( field
, label
, controlInput
, controlModifiers
, help
)
myField : Html msg
myField
= field []
[ controlLabel [] []
, controlInput myControlInputModifiers [] [] []
, controlHelp Default [] []
]
Html msg
{ loading : Maybe Bulma.Modifiers.Size
, expanded : Basics.Bool
, iconLeft : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, Bulma.Elements.IconBody msg )
, iconRight : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, Bulma.Elements.IconBody msg )
}
controlModifiers : ControlModifiers msg
control : ControlModifiers msg -> List (Html.Attribute msg) -> List (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.Modifiers.Size
, state : Bulma.Modifiers.State
, color : Bulma.Modifiers.Color
, expanded : Basics.Bool
, rounded : Basics.Bool
, readonly : Basics.Bool
, disabled : Basics.Bool
, iconLeft : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, Bulma.Elements.IconBody msg )
, iconRight : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, Bulma.Elements.IconBody msg )
}
controlInputModifiers : ControlInputModifiers msg
controlInput : ControlInputModifiers msg -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (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.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Control msg
Just like controlInput
, but with the type="text"
attribute added to the input.
controlPassword : ControlInputModifiers msg -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Control msg
Just like controlInput
, but with the type="password"
attribute added to the input.
controlEmail : ControlInputModifiers msg -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Control msg
Just like controlInput
, but with the type="email"
attribute added to the input.
controlPhone : ControlInputModifiers msg -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Control msg
Just like controlInput
, but with the type="tel"
attribute added to the input.
{ size : Bulma.Modifiers.Size
, state : Bulma.Modifiers.State
, color : Bulma.Modifiers.Color
, readonly : Basics.Bool
, disabled : Basics.Bool
}
controlTextAreaModifiers : ControlTextAreaModifiers
controlTextArea : ControlTextAreaModifiers -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (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.Modifiers.Size
, state : Bulma.Modifiers.State
, color : Bulma.Modifiers.Color
, expanded : Basics.Bool
, iconLeft : Maybe ( Bulma.Modifiers.Size
, List (Html.Attribute msg)
, Bulma.Elements.IconBody msg )
}
controlSelectModifiers : ControlSelectModifiers msg
Html msg
controlSelect : ControlSelectModifiers msg -> List (Html.Attribute msg) -> List (Html.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.Attribute msg) -> List (Html.Attribute msg) -> List (Html msg) -> Control msg
A rounded variation of controlSelect
.
controlMultiselect : ControlSelectModifiers msg -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Option msg) -> Control msg
Accepts options just like controlSelect
, except it allows you to select multiple list items.
controlLabel : List (Html.Attribute msg) -> List (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.Attribute msg) -> List (Html msg) -> Html msg
Just a simple label.
myLabel : Html msg
myLabel
= label [] [ text "hi" ]
controlCheckBox : IsDisabled -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (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 msg
controlRadio : List (Html.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" ]
]
controlButton : Bulma.Elements.ButtonModifiers msg -> List (Html.Attribute msg) -> List (Html.Attribute msg) -> List (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.Modifiers.Color -> List (Html.Attribute msg) -> List (Html msg) -> Control msg
Secretly just help
. Created this just for consistency.
help : Bulma.Modifiers.Color -> List (Html.Attribute msg) -> List (Html msg) -> Html msg
import B.Modifiers exposing (Color(Danger))
myHelp : Html msg
myHelp
= help Danger []
[ text "This field is required."
]
Coming Soon!
fields : Bulma.Modifiers.HorizontalAlignment -> List (Html.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.Modifiers.HorizontalAlignment -> List (Html.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.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.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 msg
fieldLabel : Bulma.Modifiers.Size -> List (Html.Attribute msg) -> List (Control msg) -> HorizontalFieldPartition msg
fieldLabel
expects a Bulma label element.
import B.Modifiers exposing (Size(Large))
import B.Form exposing ( label
, fieldLabel
)
myFieldLabel : Html msg
myFieldLabel
= fieldLabel Large []
[ label []
[ text "Email?"
]
]
fieldBody : List (Html.Attribute msg) -> List (Field msg) -> HorizontalFieldPartition msg
myFieldBody : Html msg
myFieldBody
= fieldBody []
[ field []
[ controlInput myControlInputModifiers [] [] []
]
, field []
[ controlInput myControlInputModifiers [] [] []
]
]