Represent the opaque Input
configuration.
text : (model -> Maybe String) -> (String -> msg) -> Input model msg
Create an input[type="text"]
.
password : (model -> Maybe String) -> (String -> msg) -> Input model msg
Create an input[type="password"]
.
date : (model -> Maybe String) -> (String -> msg) -> Input model msg
Create an input[type="date"]
.
number : (model -> Maybe String) -> (String -> msg) -> Input model msg
Create an input[type="number"]
.
email : (model -> Maybe String) -> (String -> msg) -> Input model msg
Create an input[type="email"]
.
render : model -> Input model msg -> List (Html msg)
Input
.import Html
import Prima.Pyxis.Form.Input as Input
import Prima.Pyxis.Form.Validation as Validation
...
type Msg =
OnInput String
type alias Model =
{ username : Maybe String
, isSubmitted : Bool
}
...
view : Html Msg
view =
Html.div
[]
(Input.email .username OnInput
|> Input.withClass "my-custom-class"
|> Input.withValidation (Maybe.andThen validate << .username)
|> Input.withIsSubmitted .isSubmitted
)
validate : String -> Validation.Type
validate str =
if String.isEmpty str then
Just <| Validation.ErrorWithMessage "Username is empty".
else
Nothing
withAttribute : Html.Attribute msg -> Input model msg -> Input model msg
Adds a generic Html.Attribute to the Input
.
withClass : String -> Input model msg -> Input model msg
Adds a class
to the Input
.
withDefaultValue : Maybe String -> Input model msg -> Input model msg
Adds a default value to the Input
.
Useful to teach the component about it's pristine/touched
state.
withDisabled : Basics.Bool -> Input model msg -> Input model msg
Adds a disabled
Html.Attribute to the Input
.
withId : String -> Input model msg -> Input model msg
Adds an id
Html.Attribute to the Input
.
withName : String -> Input model msg -> Input model msg
Adds a name
Html.Attribute to the Input
.
withMediumSize : Input model msg -> Input model msg
Adds a size
of Medium
to the Input
.
withSmallSize : Input model msg -> Input model msg
Sets a size
of Small
to the Input
.
withLargeSize : Input model msg -> Input model msg
Adds a size
of Large
to the Input
.
withPlaceholder : String -> Input model msg -> Input model msg
Adds a placeholder
Html.Attribute to the Input
.
withOverridingClass : String -> Input model msg -> Input model msg
Adds a class
to the Input
which overrides all the previous.
withIsSubmitted : (model -> Basics.Bool) -> Input model msg -> Input model msg
Adds an isSubmitted
predicate to the Input
.
withPrependGroup : List (Html msg) -> Input model msg -> Input model msg
Prepends an InputGroup
with custom Html
.
withAppendGroup : List (Html msg) -> Input model msg -> Input model msg
Appends an InputGroup
with custom Html
.
withGroupClass : String -> Input model msg -> Input model msg
Adds a class
to the InputGroup
which wraps the Input
.
withOnBlur : msg -> Input model msg -> Input model msg
Attaches the onBlur
event to the Input
.
withOnFocus : msg -> Input model msg -> Input model msg
Attaches the onFocus
event to the Input
.
withValidation : (model -> Maybe Prima.Pyxis.Form.Validation.Type) -> Input model msg -> Input model msg
Adds a Validation
rule to the Input
.