afidegnum / elm-bulmanizer / Bulma.Form

Table of Contents

Aliases


type alias IsDisabled =
Basics.Bool

Field


type alias Field msg =
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 [] []
    ]

Control


type alias Control msg =
Html msg


type alias ControlModifiers 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.

Input


type alias ControlInputModifiers msg =
{ 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.

TextArea


type alias ControlTextAreaModifiers =
{ 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
        []

Select


type alias ControlSelectModifiers msg =
{ 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


type alias Option 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.

Label

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" ]

CheckBox

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"
        ]

Radio


type alias IsChecked =
Basics.Bool


type alias RadioButton msg =
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" ]
        ]

Button

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!"
        ]

Help

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."
    ]

File

Coming Soon!

Fields

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 [] [] [] 
        ]
      ]
    ]

Horizontal Field Partition


type alias HorizontalFieldPartition msg =
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 [] [] []
      ]
    ]