MichaelCombs28 / elm-css-bulma / Bulma.Styled.Form

Table of Contents

Aliases


type alias IsDisabled =
Basics.Bool

Field


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

Control


type alias Control msg =
Html.Styled.Html msg


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

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

TextArea


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

Select


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


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

Label

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

CheckBox

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

Radio


type alias IsChecked =
Basics.Bool


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

Button

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

Help

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

File

Coming Soon!

Fields

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

Horizontal Field Partition


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