mdgriffith/stylish-elephants/5.0.1

NOTE: this package is not compatible with Elm 0.19.1

Element.Input

Inputs

List (Attribute msg)
-> { onPress : Maybe msg
, label : Element msg
}
-> Element msg

A standard button.

The onPress handler will be fired either onClick or when the element is focused and the enter key has been pressed.

import Element.Input as Input


Input.button []
    { onPress = Just ClickMsg
    , label = text "My Button"
    }

onPress takes a Maybe msg. If you provide the value Nothing, then the button will be disabled.

List (Attribute msg)
-> { onChange : Maybe (Bool -> msg)
, icon : Maybe (Element msg)
, checked : Bool
, label : Label msg
}
-> Element msg
List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
}
-> Element msg
type Placeholder msg
placeholder : List (Attribute msg) -> Element msg -> Placeholder msg
List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
}
-> Element msg
List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
, show : Bool
}
-> Element msg

A password input that allows the browser to autofill.

It's newPassword instead of just password because it gives the browser a hint on what type of password input it is.

A password takes all the arguments a normal Input.text would, and also show, which will remove the password mask (e.g. **** vs pass1234)

List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
, show : Bool
}
-> Element msg
List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
}
-> Element msg
List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
}
-> Element msg
List (Attribute msg)
-> { onChange : Maybe (String -> msg)
, text : String
, placeholder : Maybe (Placeholder msg)
, label : Label msg
, spellcheck : Bool
}
-> Element msg
type alias Radio option msg =
{ onChange : Maybe (option -> msg)
, options : List (Option option msg)
, selected : Maybe option
, label : Label msg
}
radio : List (Attribute msg) -> Radio option msg -> Element msg
Input.radio
    [ padding 10
    , spacing 20
    ]
    { onChange = Just ChooseLunch
    , selected = Just model.lunch
    , label = Input.labelAbove (text "Lunch")
    , options =
        [ Input.styledChoice Burrito <|
            \selected ->
                Element.row
                    [ spacing 5 ]
                    [ el None [] <|
                        if selected then
                            text ":D"
                        else
                            text ":("
                    , text "burrito"
                    ]
        , Input.option Taco (text "Taco!")
        , Input.option Gyro (text "Gyro")
        ]
    }
radioRow : List (Attribute msg) -> Radio option msg -> Element msg

Same as radio, but displayed as a row

type Option value msg

Add choices to your radio and select menus.

option : value -> Element msg -> Option value msg
optionWith : value -> (OptionState -> Element msg) -> Option value msg

Labels

type Label msg

Every input has a required label.

labelAbove : List (Attribute msg) -> Element msg -> Label msg
labelBelow : List (Attribute msg) -> Element msg -> Label msg
labelLeft : List (Attribute msg) -> Element msg -> Label msg
labelRight : List (Attribute msg) -> Element msg -> Label msg
focusedOnLoad : Attribute msg