[{"name":"Attr","comment":"\n\n\n# Creating attribute based APIs\n\nIn this example, we will create a button module using the opaque attribute pattern.\n\n    module Button exposing\n        ( Attribute\n        , background\n        , color\n        , disabled\n        , view\n        )\n\n.\n\n    import Html as H exposing (Html)\n    import Html.Attributes as HA\n    import Html.Events as HE\n\nFirst, lets define the attributes we will want to use for constructing our module.\n\n    type alias Attributes =\n        { color : String\n        , background : String\n        , disabled : Bool\n        }\n\n    type alias Attribute =\n        Attr.Attr Attributes\n\n    defaultAttrs : Attributes\n    defaultAttrs =\n        { color = \"white\"\n        , background = \"black\"\n        , disabled = False\n        }\n\n**Important**\n\n  - You **need to use a `type alias`** for the attributes record.\n  - You **should not expose this `type alias`**.\n\nThis way you will protect the API from constant breaking changes when we change the attributes record internally.\n\nThen, we can create functions that will be used to pass in attributes to our module.\n\n    color : String -> Attribute\n    color value =\n        Attr.attr (\\attrs -> { attrs | color = value })\n\n    background : String -> Attribute\n    background value =\n        Attr.attr (\\attrs -> { attrs | background = value })\n\n    disabled : Attribute\n    disabled =\n        Attr.attr (\\attrs -> { attrs | disabled = True })\n\nFinally, lets create the view function that builds our final result.\n\nIn this example we're using a pattern where all optional settings are passed as attributes, and as a second argument we receive a record with required arguments.\n\n    view : List Attribute -> { label : String, onClick : msg } -> Html msg\n    view =\n        Attr.withAttrs defaultAttrs\n            (\\attrs props ->\n                H.button\n                    [ HA.style \"color\" attrs.color\n                    , HA.style \"background\" attrs.background\n                    , HA.disabled attrs.disabled\n                    , HE.onClick props.onClick\n                    ]\n                    [ H.text props.label ]\n            )\n\nYou can also manually fold all your attributes into the attributes record manually.\n\nThis is what the same function above would look like using this approach:\n\n    view : List Attribute -> { label : String, onClick : msg } -> Html msg\n    view attrList props =\n        let\n            attrs : Attributes\n            attrs =\n                Attr.toAttrs defaultAttrs attrList\n        in\n        H.button\n            [ HA.style \"color\" attrs.color\n            , HA.style \"background\" attrs.background\n            , HA.disabled attrs.disabled\n            , HE.onClick props.onClick\n            ]\n            [ H.text props.label ]\n\n@docs attr, withAttrs, toAttrs, Attr\n\n\n# Using opaque attribute based APIs\n\nThe opaque attribute API is similar to familiar libraries like `elm/html`, `rtfeldman/elm-css` and `terezka/elm-charts`.\nThe learning curve is very low, so not a lot of explanation is needed.\n\nHere we're using the module defined above to create a button.\n\n    import Button\n    import Html as H exposing (Html)\n\n    button : Html msg\n    button =\n        Button.view\n            [ Button.background \"green\" ]\n            { label = \"Submit\"\n            , onClick = ClickedSubmit\n            }\n\n\n# Common Utilities\n\nWe provide a few utility functions that are commonly useful for opaque attribute APIs.\n\nThis is needed due to the opaqueness of the type. Otherwise, the API author would need to implement similar functions for each module.\n\n@docs if_, maybe, batch, filter, none\n\n","unions":[{"name":"Attr","comment":" ","args":["attrs"],"cases":[]}],"aliases":[],"values":[{"name":"attr","comment":" ","type":"(attrs -> attrs) -> Attr.Attr attrs"},{"name":"batch","comment":" Apply multiple attributes at the same time.\n\n    primaryAttrs : Button.Attribute\n    primaryAttrs =\n        Attr.batch\n            [ Button.color \"black\"\n            , Button.background \"lime\"\n            ]\n\n    secondaryAttrs : Button.Attribute\n    secondaryAttrs =\n        Attr.batch\n            [ Button.color \"white\"\n            , Button.background \"blue\"\n            ]\n\n    button : Bool -> Html msg\n    button isPrimary =\n        Button.view\n            [ if isPrimary then\n                primaryAttrs\n\n              else\n                secondaryAttrs\n            ]\n            { label = \"Submit\"\n            , onClick = Submitted\n            }\n\n","type":"List.List (Attr.Attr attrs) -> Attr.Attr attrs"},{"name":"filter","comment":" Conditionally apply attributes, similar to `classList`.\n\n    Button.view\n        [ Attr.filter\n            [ ( primaryAttrs, isPrimary )\n            , ( secondaryAttrs, not isPrimary )\n            , ( Button.disabled, isDisabled )\n            ]\n        ]\n        { label = \"Submit\"\n        , onClick = Submitted\n        }\n\n","type":"List.List ( Attr.Attr attrs, Basics.Bool ) -> Attr.Attr attrs"},{"name":"if_","comment":"\n\n    button : Bool -> Html msg\n    button disabled =\n        Button.view\n            [ Attr.if_ disabled Button.disabled ]\n            { label = \"Submit\"\n            , onClick = ClickedSubmit\n            }\n\n","type":"Basics.Bool -> Attr.Attr attrs -> Attr.Attr attrs"},{"name":"maybe","comment":" Conditionally apply attributes based on `Maybe a` values.\n\n    button : Maybe String -> Html msg\n    button customColor =\n        Button.view\n            [ Attr.maybe Button.color customColor\n            ]\n            { label = \"Submit\"\n            , onClick = Submitted\n            }\n\n","type":"(a -> Attr.Attr attrs) -> Maybe.Maybe a -> Attr.Attr attrs"},{"name":"none","comment":" A noop attribute. Useful for conditionally passing an attribute to a list, instead of relying on list concatenations.\n\n    Button.view\n        [ if disabled then\n            Button.disabled\n\n          else\n            Attr.none\n        ]\n        { label = \"Submit\"\n        , onClick = Submitted\n        }\n\nYou can think of it as the equivalent of `text \"\"` or `class \"\"`.\n\n","type":"Attr.Attr attrs"},{"name":"toAttrs","comment":" ","type":"attrs -> List.List (Attr.Attr attrs) -> attrs"},{"name":"withAttrs","comment":" ","type":"attrs -> (attrs -> a) -> List.List (Attr.Attr attrs) -> a"}],"binops":[]}]