altayaydemir / style-elements / Element.Attributes

This module is a mirror of Html.Attributes

Some attributes have been added.

The only modification to the existing library is that style has been renamed inlineStyle to avoid collision with Style.style.

Since this is a style library, you shouldn't need it very often.

Style Element Attributes

These are the new attributes that generally have to do with layout.

hidden : Element.Internal.Model.Attribute variation msg

Remove the element from the view.

vary : variation -> Basics.Bool -> Element.Internal.Model.Attribute variation msg

Apply a style variation.

el MyButton [ vary Disabled True ] (text "My Disabled Button!")

Alignment

Alignment attributes are incredibly useful for adjusting your layout.

When applied to layout elements like row and grid, alignment will affect the alignment of the children.

When applied to singular elements like el, alignment will affect the alignment of that individual element.

center : Element.Internal.Model.Attribute variation msg

verticalCenter : Element.Internal.Model.Attribute variation msg

alignTop : Element.Internal.Model.Attribute variation msg

alignBottom : Element.Internal.Model.Attribute variation msg

alignLeft : Element.Internal.Model.Attribute variation msg

alignRight : Element.Internal.Model.Attribute variation msg

spread : Element.Internal.Model.Attribute variation msg

verticalSpread : Element.Internal.Model.Attribute variation msg

Sizing

width : Length -> Element.Internal.Model.Attribute variation msg

minWidth : Length -> Element.Internal.Model.Attribute variation msg

maxWidth : Length -> Element.Internal.Model.Attribute variation msg

height : Length -> Element.Internal.Model.Attribute variation msg

minHeight : Length -> Element.Internal.Model.Attribute variation msg

maxHeight : Length -> Element.Internal.Model.Attribute variation msg


type alias Length =
Style.Internal.Model.Length

px : Basics.Float -> Length

fill : Length

fillPortion : Basics.Int -> Length

percent : Basics.Float -> Length

content : Length

Spacing ++ Padding

Spacing allows a layout to set the distance between the children in the layout.

So this layout:

row [ spacing 10, padding 10 ]
    [ el Box [] empty
    , el Box [] empty
    , el Box [] empty
    ]

Is rendered into something like this:

Spacing

spacing : Basics.Float -> Element.Internal.Model.Attribute variation msg

Set the spacing between children in a layout.

spacingXY : Basics.Float -> Basics.Float -> Element.Internal.Model.Attribute variation msg

Set the horizontal and vertical spacing separately.

This is generally only useful in a textLayout or a grid.

padding : Basics.Float -> Element.Internal.Model.Attribute variation msg

paddingXY : Basics.Float -> Basics.Float -> Element.Internal.Model.Attribute variation msg

Set horizontal and vertical padding.

paddingTop : Basics.Float -> Element.Internal.Model.Attribute variation msg

paddingRight : Basics.Float -> Element.Internal.Model.Attribute variation msg

paddingBottom : Basics.Float -> Element.Internal.Model.Attribute variation msg

paddingLeft : Basics.Float -> Element.Internal.Model.Attribute variation msg

Positioning

moveUp : Basics.Float -> Element.Internal.Model.Attribute variation msg

moveDown : Basics.Float -> Element.Internal.Model.Attribute variation msg

moveRight : Basics.Float -> Element.Internal.Model.Attribute variation msg

moveLeft : Basics.Float -> Element.Internal.Model.Attribute variation msg

Scrollbars

scrollbars : Element.Internal.Model.Attribute variation msg

Turn on scrollbars if content overflows.

yScrollbar : Element.Internal.Model.Attribute variation msg

Turn on scrollbars if content overflows vertically.

xScrollbar : Element.Internal.Model.Attribute variation msg

Turn on scrollbars if content overflows horizontally.

Overflow

clip : Element.Internal.Model.Attribute variation msg

Clip content that overflows.

clipX : Element.Internal.Model.Attribute variation msg

clipY : Element.Internal.Model.Attribute variation msg

Conversion

toAttr : Html.Attribute msg -> Element.Internal.Model.Attribute variation msg

Convert an existing Html.Attribute to an Element.Attribute.

This is useful for working with any library that returns a Html.Attribute.

Primitives

inlineStyle : String -> String -> Element.Internal.Model.Attribute variation msg

This is the manual override for to specify inline css properties.

myStyle : Attribute msg
myStyle =
    inlineStyle "backgroundColor" "red"

greeting : Html msg
greeting =
    el [ myStyle ] (text "Hello!")

Use it if you need to, though it's obviously recommended to use the Style module instead.

property : String -> Json.Decode.Value -> Element.Internal.Model.Attribute variation msg

Create properties, like saying domNode.className = 'greeting' in JavaScript.

import Json.Encode as Encode

class : String -> Attribute variation msg
class =
    Html.Attributes.class

Read more about the difference between properties and attributes here.

attribute : String -> String -> Element.Internal.Model.Attribute variation msg

Create attributes, like saying domNode.setAttribute('class', 'greeting') in JavaScript.

class : String -> Attribute variation msg
class =
    Html.Attributes.class

Read more about the difference between properties and attributes here.

map : (a -> msg) -> Element.Internal.Model.Attribute variation a -> Element.Internal.Model.Attribute variation msg

Transform the messages produced by an Attribute.

Super Common Attributes

class : String -> Element.Internal.Model.Attribute variation msg

Often used with CSS to style elements with common properties.

classList : List ( String, Basics.Bool ) -> Element.Internal.Model.Attribute variation msg

This function makes it easier to build a space-separated class attribute. Each class can easily be added and removed depending on the boolean value it is paired with. For example, maybe we want a way to view notices:

viewNotice : Notice -> Html msg
viewNotice notice =
    div
        [ classList
            [ ( "notice", True )
            , ( "notice-important", notice.isImportant )
            , ( "notice-seen", notice.isSeen )
            ]
        ]
        [ text notice.content ]

id : String -> Element.Internal.Model.Attribute variation msg

Often used with CSS to style a specific element. The value of this attribute must be unique.