Helper functions for HTML attributes. They are organized roughly by
category. Each attribute is labeled with the HTML tags it can be used with, so
just search the page for video
if you want video stuff.
toAttribute : (userText -> String) -> Translatable.Html.Internal.Attribute userText msg -> Html.Attribute msg
Convert Translatable.Html.Attributes.Attribute
back into core Html.Attributes.Attribute
.
Translatable.Html.toHtml
will do this for you so you shouldn't need to use it.
import Html.Attributes
import Translatable.Html.Attributes
attrs : List (Html.Attributes.Attribute msg)
attrs =
List.map (Translatable.Html.Attributes.toAttribute translate) typedAttrs
typedAttrs : List (Translatable.Html.Attributes.Attribute Translatable msg)
typedAttrs =
[ "Some title"
|> text
|> Translatable.Html.Attributes.title
]
type Translatable
= Translatable String
text : String -> Translatable
text =
Translatable
translate : Translatable -> String
translate (Translatable userText) =
userText
style : String -> String -> Translatable.Html.Internal.Attribute userText msg
Specify a style.
greeting : Node msg
greeting =
div
[ style "background-color" "red"
, style "height" "90px"
, style "width" "100%"
]
[ text "Hello!"
]
There is no Html.Styles
module because best practices for working with HTML
suggest that this should primarily be specified in CSS files. So the general
recommendation is to use this function lightly.
property : String -> Json.Encode.Value -> Translatable.Html.Internal.Attribute userText msg
Create properties, like saying domNode.className = 'greeting'
in
JavaScript.
import Json.Encode as Encode
class : String -> Attribute userText msg
class name =
property "className" (Encode.string name)
Read more about the difference between properties and attributes here.
attribute : String -> String -> Translatable.Html.Internal.Attribute userText msg
Create attributes, like saying domNode.setAttribute('class', 'greeting')
in JavaScript.
class : String -> Attribute userText msg
class name =
attribute "class" name
Read more about the difference between properties and attributes here.
map : (a -> msg) -> Translatable.Html.Internal.Attribute userText a -> Translatable.Html.Internal.Attribute userText msg
Transform the messages produced by an Attribute
.
class : String -> Translatable.Html.Internal.Attribute userText msg
Often used with CSS to style elements with common properties.
Note: You can have as many class
and classList
attributes as you want.
They all get applied, so if you say [ class "notice", class "notice-seen" ]
you will get both classes!
classList : List ( String, Basics.Bool ) -> Translatable.Html.Internal.Attribute userText 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 ]
Note: You can have as many class
and classList
attributes as you want.
They all get applied, so if you say [ class "notice", class "notice-seen" ]
you will get both classes!
id : String -> Translatable.Html.Internal.Attribute userText msg
Often used with CSS to style a specific element. The value of this attribute must be unique.
title : userText -> Translatable.Html.Internal.Attribute userText msg
Text to be displayed in a tooltip when hovering over the element.
hidden : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates the relevance of an element.
type_ : String -> Translatable.Html.Internal.Attribute userText msg
Defines the type of a button
, input
, embed
, object
, script
,
source
, style
, or menu
.
value : String -> Translatable.Html.Internal.Attribute userText msg
Defines a default value which will be displayed in a button
, option
,
input
, li
, meter
, progress
, or param
.
checked : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether an input
of type checkbox is checked.
placeholder : String -> Translatable.Html.Internal.Attribute userText msg
Provides a hint to the user of what can be entered into an input
or
textarea
.
selected : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Defines which option
will be selected on page load.
accept : String -> Translatable.Html.Internal.Attribute userText msg
List of types the server accepts, typically a file type.
For form
and input
.
acceptCharset : String -> Translatable.Html.Internal.Attribute userText msg
List of supported charsets in a form
.
action : String -> Translatable.Html.Internal.Attribute userText msg
The URI of a program that processes the information submitted via a form
.
autocomplete : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether a form
or an input
can have their values automatically
completed by the browser.
autofocus : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
The element should be automatically focused after the page loaded.
For button
, input
, select
, and textarea
.
disabled : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether the user can interact with a button
, fieldset
,
input
, optgroup
, option
, select
or textarea
.
enctype : String -> Translatable.Html.Internal.Attribute userText msg
How form
data should be encoded when submitted with the POST method.
Options include: application/x-www-form-urlencoded, multipart/form-data, and
text/plain.
list : String -> Translatable.Html.Internal.Attribute userText msg
Associates an input
with a datalist
tag. The datalist gives some
pre-defined options to suggest to the user as they interact with an input.
The value of the list attribute must match the id of a datalist
node.
For input
.
maxlength : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Defines the maximum number of characters allowed in an input
or
textarea
.
minlength : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Defines the minimum number of characters allowed in an input
or
textarea
.
method : String -> Translatable.Html.Internal.Attribute userText msg
Defines which HTTP method to use when submitting a form
. Can be GET
(default) or POST.
multiple : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether multiple values can be entered in an input
of type
email or file. Can also indicate that you can select
many options.
name : String -> Translatable.Html.Internal.Attribute userText msg
Name of the element. For example used by the server to identify the fields
in form submits. For button
, form
, fieldset
, iframe
, input
,
object
, output
, select
, textarea
, map
, meta
, and param
.
novalidate : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
This attribute indicates that a form
shouldn't be validated when
submitted.
pattern : String -> Translatable.Html.Internal.Attribute userText msg
Defines a regular expression which an input
's value will be validated
against.
readonly : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether an input
or textarea
can be edited.
required : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether this element is required to fill out or not.
For input
, select
, and textarea
.
size : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
For input
specifies the width of an input in characters.
For select
specifies the number of visible options in a drop-down list.
for : String -> Translatable.Html.Internal.Attribute userText msg
The element ID described by this label
or the element IDs that are used
for an output
.
form : String -> Translatable.Html.Internal.Attribute userText msg
Indicates the element ID of the form
that owns this particular button
,
fieldset
, input
, label
, meter
, object
, output
, progress
,
select
, or textarea
.
max : String -> Translatable.Html.Internal.Attribute userText msg
Indicates the maximum value allowed. When using an input of type number or
date, the max value must be a number or date. For input
, meter
, and progress
.
min : String -> Translatable.Html.Internal.Attribute userText msg
Indicates the minimum value allowed. When using an input of type number or
date, the min value must be a number or date. For input
and meter
.
step : String -> Translatable.Html.Internal.Attribute userText msg
Add a step size to an input
. Use step "any"
to allow any floating-point
number to be used in the input.
cols : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Defines the number of columns in a textarea
.
rows : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Defines the number of rows in a textarea
.
wrap : String -> Translatable.Html.Internal.Attribute userText msg
Indicates whether the text should be wrapped in a textarea
. Possible
values are "hard" and "soft".
href : String -> Translatable.Html.Internal.Attribute userText msg
The URL of a linked resource, such as a
, area
, base
, or link
.
target : String -> Translatable.Html.Internal.Attribute userText msg
Specify where the results of clicking an a
, area
, base
, or form
should appear. Possible special values include:
You can also give the name of any frame
you have created.
download : String -> Translatable.Html.Internal.Attribute userText msg
Indicates that clicking an a
and area
will download the resource
directly. The String
argument determins the name of the downloaded file.
Say the file you are serving is named hats.json
.
download "" -- hats.json
download "my-hats.json" -- my-hats.json
download "snakes.json" -- snakes.json
The empty String
says to just name it whatever it was called on the server.
hreflang : String -> Translatable.Html.Internal.Attribute userText msg
Two-letter language code of the linked resource of an a
, area
, or link
.
media : String -> Translatable.Html.Internal.Attribute userText msg
Specifies a hint of the target media of a a
, area
, link
, source
,
or style
.
ping : String -> Translatable.Html.Internal.Attribute userText msg
Specify a URL to send a short POST request to when the user clicks on an
a
or area
. Useful for monitoring and tracking.
rel : String -> Translatable.Html.Internal.Attribute userText msg
Specifies the relationship of the target object to the link object.
For a
, area
, link
.
ismap : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
When an img
is a descendant of an a
tag, the ismap
attribute
indicates that the click location should be added to the parent a
's href as
a query string.
usemap : String -> Translatable.Html.Internal.Attribute userText msg
Specify the hash name reference of a map
that should be used for an img
or object
. A hash name reference is a hash symbol followed by the element's name or id.
E.g. "#planet-map"
.
shape : String -> Translatable.Html.Internal.Attribute userText msg
Declare the shape of the clickable area in an a
or area
. Valid values
include: default, rect, circle, poly. This attribute can be paired with
coords
to create more particular shapes.
coords : String -> Translatable.Html.Internal.Attribute userText msg
A set of values specifying the coordinates of the hot-spot region in an
area
. Needs to be paired with a shape
attribute to be meaningful.
src : String -> Translatable.Html.Internal.Attribute userText msg
The URL of the embeddable content. For audio
, embed
, iframe
, img
,
input
, script
, source
, track
, and video
.
height : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Declare the height of a canvas
, embed
, iframe
, img
, input
,
object
, or video
.
width : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Declare the width of a canvas
, embed
, iframe
, img
, input
,
object
, or video
.
alt : String -> Translatable.Html.Internal.Attribute userText msg
Alternative text in case an image can't be displayed. Works with img
,
area
, and input
.
autoplay : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
The audio
or video
should play as soon as possible.
controls : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether the browser should show playback controls for the audio
or video
.
loop : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether the audio
or video
should start playing from the
start when it's finished.
preload : String -> Translatable.Html.Internal.Attribute userText msg
Control how much of an audio
or video
resource should be preloaded.
poster : String -> Translatable.Html.Internal.Attribute userText msg
A URL indicating a poster frame to show until the user plays or seeks the
video
.
default : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates that the track
should be enabled unless the user's preferences
indicate something different.
kind : String -> Translatable.Html.Internal.Attribute userText msg
Specifies the kind of text track
.
srclang : String -> Translatable.Html.Internal.Attribute userText msg
A two letter language code indicating the language of the track
text data.
sandbox : String -> Translatable.Html.Internal.Attribute userText msg
A space separated list of security restrictions you'd like to lift for an
iframe
.
srcdoc : String -> Translatable.Html.Internal.Attribute userText msg
An HTML document that will be displayed as the body of an iframe
. It will
override the content of the src
attribute if it has been specified.
reversed : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether an ordered list ol
should be displayed in a descending
order instead of a ascending.
start : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Defines the first number of an ordered list if you want it to be something besides 1.
align : String -> Translatable.Html.Internal.Attribute userText msg
Specifies the horizontal alignment of a caption
, col
, colgroup
,
hr
, iframe
, img
, table
, tbody
, td
, tfoot
, th
, thead
, or
tr
.
colspan : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
The colspan attribute defines the number of columns a cell should span.
For td
and th
.
rowspan : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Defines the number of rows a table cell should span over.
For td
and th
.
headers : String -> Translatable.Html.Internal.Attribute userText msg
A space separated list of element IDs indicating which th
elements are
headers for this cell. For td
and th
.
scope : String -> Translatable.Html.Internal.Attribute userText msg
Specifies the scope of a header cell th
. Possible values are: col, row,
colgroup, rowgroup.
Attributes that can be attached to any HTML tag but are less commonly used.
accesskey : Char -> Translatable.Html.Internal.Attribute userText msg
Defines a keyboard shortcut to activate or add focus to the element.
contenteditable : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether the element's content is editable.
contextmenu : String -> Translatable.Html.Internal.Attribute userText msg
Defines the ID of a menu
element which will serve as the element's
context menu.
dir : String -> Translatable.Html.Internal.Attribute userText msg
Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left).
draggable : String -> Translatable.Html.Internal.Attribute userText msg
Defines whether the element can be dragged.
dropzone : String -> Translatable.Html.Internal.Attribute userText msg
Indicates that the element accept the dropping of content on it.
itemprop : String -> Translatable.Html.Internal.Attribute userText msg
lang : String -> Translatable.Html.Internal.Attribute userText msg
Defines the language used in the element.
spellcheck : Basics.Bool -> Translatable.Html.Internal.Attribute userText msg
Indicates whether spell checking is allowed for the element.
tabindex : Basics.Int -> Translatable.Html.Internal.Attribute userText msg
Overrides the browser's default tab order and follows the one specified instead.
cite : String -> Translatable.Html.Internal.Attribute userText msg
Contains a URI which points to the source of the quote or change in a
blockquote
, del
, ins
, or q
.
datetime : String -> Translatable.Html.Internal.Attribute userText msg
Indicates the date and time associated with the element.
For del
, ins
, time
.
pubdate : String -> Translatable.Html.Internal.Attribute userText msg
Indicates whether this date and time is the date of the nearest article
ancestor element. For time
.
manifest : String -> Translatable.Html.Internal.Attribute userText msg
Specifies the URL of the cache manifest for an html
tag.