NOTE: the latest version is 25.0.0

README About Versions Source Modules

ElmWidgets

Setup

globalStyles : Html msg

Setup all styles needed for ElmWidgets.

Buttons

Primary Button

primaryButton :

List (PrimaryButtonAttributes -> PrimaryButtonAttributes)

-> { label : Html msg

, onClick : msg

}

-> Html msg

primaryButtonLink :

List (PrimaryButtonAttributes -> PrimaryButtonAttributes)

-> { label : Html msg

, href : String

}

-> Html msg

type alias PrimaryButtonAttributes =

{ id : Maybe String

, color : String

, background : String

, shadow : String

, disabled : Bool

, fill : Bool

}

Status Buttons

List (StatusButtonAttributes -> StatusButtonAttributes)

-> { label : Html msg

, onClick : msg

}

-> Html msg

dangerButtonLink :

List (StatusButtonAttributes -> StatusButtonAttributes)

-> { label : Html msg

, href : String

}

-> Html msg

confirmButton :

List (StatusButtonAttributes -> StatusButtonAttributes)

-> { label : Html msg

, onClick : msg

}

-> Html msg

confirmButtonLink :

List (StatusButtonAttributes -> StatusButtonAttributes)

-> { label : Html msg

, href : String

}

-> Html msg

type alias StatusButtonAttributes =

{ id : Maybe String

, disabled : Bool

, fill : Bool

}

Outlined Button

outlinedButton :

List (OutlinedButtonAttributes -> OutlinedButtonAttributes)

-> { label : Html msg

, onClick : msg

}

-> Html msg

outlinedButtonLink :

List (OutlinedButtonAttributes -> OutlinedButtonAttributes)

-> { label : Html msg

, href : String

}

-> Html msg

type alias OutlinedButtonAttributes =

{ id : Maybe String

, color : String

, shadow : String

, disabled : Bool

, fill : Bool

}

Invisible Button

invisibleButton :

List (InvisibleButtonAttributes -> InvisibleButtonAttributes)

-> { label : Html msg

, onClick : msg

}

-> Html msg

invisibleButtonLink :

List (InvisibleButtonAttributes -> InvisibleButtonAttributes)

-> { label : Html msg

, href : String

}

-> Html msg

type alias InvisibleButtonAttributes =

{ id : Maybe String

, color : String

, background : String

, disabled : Bool

, fill : Bool

}

Loading

loadingCircle : List (LoadingAttributes -> LoadingAttributes) -> Svg msg

loadingDots : List (LoadingAttributes -> LoadingAttributes) -> Html msg

loadingRipple : List (LoadingAttributes -> LoadingAttributes) -> Html msg

type alias LoadingAttributes =

{ size : Float

, color : String

}

Layout

type alias ModalAttributes =

{ absolute : Bool }

List (DataRowAttributes msg -> DataRowAttributes msg)

-> { label : Html msg

, actions : List (Html msg)

}

-> Html msg

type alias DataRowAttributes msg =

{ footer : Maybe (Html msg)

, header : Maybe (Html msg)

, left : Maybe (Html msg)

, onClick : Maybe msg

, href : Maybe String

}

Forms

List (FieldAttributes msg -> FieldAttributes msg)

-> { label : Html msg

, input : Html msg

}

-> Html msg

Input

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

datetimeInput :

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

passwordInput :

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

telephoneInput :

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

List (InputAttributes msg -> InputAttributes msg)

-> { onInput : String -> msg

, value : String

}

-> Html msg

type alias InputAttributes msg =

{ id : Maybe String

, disabled : Bool

, readOnly : Bool

, required : Bool

, pattern : Maybe String

, placeholder : Maybe String

, onFocus : Maybe msg

, onBlur : Maybe msg

, onEnter : Maybe msg

, htmlAttrs : List (Attribute msg)

}

Autocomplete

List (AutocompleteAttributes msg -> AutocompleteAttributes msg)

-> { id : String

, search : String

, value : Maybe a

, options : Maybe (List a)

, toLabel : a -> String

, onInput : String -> Maybe a -> msg

}

-> Html msg

type alias AutocompleteAttributes msg =

{ disabled : Bool

, readOnly : Bool

, placeholder : Maybe String

, onFocus : Maybe msg

, onBlur : Maybe msg

, onEnter : Maybe msg

, htmlAttrs : List (Attribute msg)

}

Checkbox

List (CheckboxAttributes -> CheckboxAttributes)

-> { value : Bool

, onInput : Bool -> msg

}

-> Html msg

type alias CheckboxAttributes =

{ id : Maybe String

, color : String

, disabled : Bool

, readOnly : Bool

}

Radio

List (RadioButtonsAttributes -> RadioButtonsAttributes)

-> { id : String

, value : a

, options : List a

, toValue : a -> String

, toLabel : a -> String

, onInput : a -> msg

}

-> Html msg

type alias RadioButtonsAttributes =

{ color : String

, disabled : Bool

, readOnly : Bool

, vertical : Bool

}

Select

List (SelectAttributes -> SelectAttributes)

-> { value : a

, options : List a

, toValue : a -> String

, toLabel : a -> String

, onInput : a -> msg

}

-> Html msg

selectWithGroups :

List (SelectAttributes -> SelectAttributes)

-> { value : a

, options : List a

, optionGroups : List ( String, List a )

, toValue : a -> String

, toLabel : a -> String

, onInput : a -> msg

}

-> Html msg

type alias SelectAttributes =

{ id : Maybe String

, disabled : Bool

, readOnly : Bool

}

Range

List (RangeAttributes -> RangeAttributes)

-> { min : Float

, max : Float

, step : Float

, value : Float

, onInput : Float -> msg

}

-> Html msg

Modules