button : List (Element.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.
checkbox : List (Element.Attribute msg) -> { onChange : Basics.Bool -> msg, icon : Basics.Bool -> Element msg, checked : Basics.Bool, label : Label msg } -> Element msg
defaultCheckbox : Basics.Bool -> Element msg
text : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg
placeholder : List (Element.Attribute msg) -> Element msg -> Placeholder msg
username : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg
newPassword : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg, show : Basics.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
)
currentPassword : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg, show : Basics.Bool } -> Element msg
email : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg
search : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg
spellChecked : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg } -> Element msg
multiline : List (Element.Attribute msg) -> { onChange : String -> msg, text : String, placeholder : Maybe (Placeholder msg), label : Label msg, spellcheck : Basics.Bool } -> Element msg
slider : List (Element.Attribute msg) -> { onChange : Basics.Float -> msg, label : Label msg, min : Basics.Float, max : Basics.Float, value : Basics.Float, thumb : Thumb, step : Maybe Basics.Float } -> Element msg
A slider input, good for capturing float values.
Input.slider
[ Element.height (Element.px 30)
-- Here is where we're creating/styling the "track"
, Element.behindContent
(Element.el
[ Element.width Element.fill
, Element.height (Element.px 2)
, Element.centerY
, Background.color grey
, Border.rounded 2
]
Element.none
)
]
{ onChange = AdjustValue
, label = Input.labelAbove [] (text "My Slider Value")
, min = 0
, max = 75
, step = Nothing
, value = model.sliderValue
, thumb =
Input.defaultThumb
}
The thumb
is the icon that you can move around.
The slider can be vertical or horizontal depending on the width/height of the slider.
height fill
and width (px someWidth)
will cause the slider to be vertical.height (px someHeight)
and width (px someWidth)
where someHeight
> someWidth
will also do it.Note: If you want a slider for an Int
value:
step
to be Just 1
, or some other whole valuevalue = toFloat model.myInt
onChange = round >> AdjustValue
thumb : List (Element.Attribute Basics.Never) -> Thumb
defaultThumb : Thumb
radio : List (Element.Attribute msg) -> { onChange : option -> msg, options : List (Option option msg), selected : Maybe option, label : Label msg } -> Element msg
Input.radio
[ padding 10
, spacing 20
]
{ onChange = 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 (Element.Attribute msg) -> { onChange : option -> msg, options : List (Option option msg), selected : Maybe option, label : Label msg } -> Element msg
Same as radio, but displayed as a row
Add choices to your radio and select menus.
option : value -> Element msg -> Option value msg
optionWith : value -> (OptionState -> Element msg) -> Option value msg
Every input has a required label
.
labelAbove : List (Element.Attribute msg) -> Element msg -> Label msg
labelBelow : List (Element.Attribute msg) -> Element msg -> Label msg
labelLeft : List (Element.Attribute msg) -> Element msg -> Label msg
labelRight : List (Element.Attribute msg) -> Element msg -> Label msg
focusedOnLoad : Element.Attribute msg