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.
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 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
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
Style.Internal.Model.Length
px : Basics.Float -> Length
fill : Length
fillPortion : Basics.Int -> Length
percent : Basics.Float -> Length
content : Length
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 : 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
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 : 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.
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
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
.
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
.
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.