jaredramirez / html-styled-extra / Html.Styled.Attributes.Extra

Additional attributes for html

Embedding static attributes

static : Html.Styled.Attribute Basics.Never -> Html.Styled.Attribute msg

Embedding static attributes.

Works alike to Html.Styled.Extra.static.

Conditional attribute handling

empty : Html.Styled.Attribute msg

A no-op attribute.

Allows for patterns like:

Html.Styled.div
    [ someAttr
    , if someCondition then
        empty

      else
        someAttr2
    ]
    [ someHtml ]

instead of

Html.Styled.div
    (someAttr
        :: (if someCondition then
                []

            else
                [ someAttr2 ]
           )
    )
    [ someHtml ]

This is useful eg. for conditional event handlers.


The only effect it can have on the resulting DOM is adding a class attribute, or adding an extra trailing space in the class attribute if added after Html.Styled.Attribute.class or Html.Styled.Attribute.classList:

-- side effect 1:
-- <div class="" />
Html.Styled.div [ empty ] []

-- side effect 2:
-- <div class="x " />
Html.Styled.div [ class "x", empty ] []

-- no side effect:
-- <div class="x" />
Html.Styled.div [ empty, class "x" ] []

-- side effect 2:
-- <div class="x " />
Html.Styled.div [ classList [ ( "x", True ) ], empty ] []

-- no side effect:
-- <div class="x" />
Html.Styled.div [ empty, classList [ ( "x", True ) ] ] []

attributeIf : Basics.Bool -> Html.Styled.Attribute msg -> Html.Styled.Attribute msg

A function to only render a HTML attribute under a certain condition

attributeMaybe : (a -> Html.Styled.Attribute msg) -> Maybe a -> Html.Styled.Attribute msg

Renders empty attribute in case of Nothing, uses the provided function in case of Just.

Inputs

valueAsFloat : Basics.Float -> Html.Styled.Attribute msg

Uses valueAsNumber to update an input with a floating-point value. This should only be used on <input> of type number, range, or date. It differs from value in that a floating point value will not necessarily overwrite the contents on an input element.

valueAsFloat 2.5 -- e.g. will not change the displayed value for input showing "2.5000"

valueAsFloat 0.4 -- e.g. will not change the displayed value for input showing ".4"

valueAsInt : Basics.Int -> Html.Styled.Attribute msg

Uses valueAsNumber to update an input with an integer value. This should only be used on <input> of type number, range, or date. It differs from value in that an integer value will not necessarily overwrite the contents on an input element.

valueAsInt 18 -- e.g. will not change the displayed value for input showing "00018"

autocomplete : Html.Styled.Attributes.Autocomplete.Completion -> Html.Styled.Attribute msg

Render one of the possible Completion types into an Attribute.

Semantic web

role : String -> Html.Styled.Attribute msg

Used to annotate markup languages with machine-extractable semantic information about the purpose of an element. See the official specs.

Meter element

low : String -> Html.Styled.Attribute msg

The upper numeric bound of the low end of the measured range, used with the meter element.

high : String -> Html.Styled.Attribute msg

The lower numeric bound of the high end of the measured range, used with the meter element.

optimum : String -> Html.Styled.Attribute msg

This attribute indicates the optimal numeric value, used with the meter element.

Media element

volume : Basics.Float -> Html.Styled.Attribute msg

Audio volume, starting from 0.0 (silent) up to 1.0 (loudest).

Custom Attributes

stringProperty : String -> String -> Html.Styled.Attribute msg

Create arbitrary string properties.

boolProperty : String -> Basics.Bool -> Html.Styled.Attribute msg

Create arbitrary bool properties.

floatProperty : String -> Basics.Float -> Html.Styled.Attribute msg

Create arbitrary floating-point properties.

intProperty : String -> Basics.Int -> Html.Styled.Attribute msg

Create arbitrary integer properties.