This file is organized roughly in order of popularity. The tags which you'd expect to use frequently will be closer to the top.
connect : (props -> Html model msg) -> (model -> props) -> Html model msg
connect
is fairly simple, it takes a function that maps model
to props
and a function that needs those props
to render Html
and with those two pieces it makes that Html
. This way your rendering and prop-building can be discrete steps.
render : Html model msg -> model -> Html msg
render
turns this packages custom Html.Provier.Html
type into the standard Html.Html
type used in Elm apps
view : Model -> Html.Html Msg
view model =
Html.div
[]
[ Html.Provider.render container model ]
container : Html.Provider.Html Model Msg
container =
Html.Provider.p [] []
fromStandardHtml : Html msg -> Html model msg
You will probably want to use Html
from the standard Elm Html library. This function can help you slip standard html into an Html.Provider.Html model msg
.
from : (b -> a) -> Html a msg -> Html b msg
You can target specific parts of your model with from
type alias Model =
{ user : User }
view : Html Model Msg
view =
div
[]
[ Html.Provider.from .user userView
-- ..
]
userView : Html User Msg
userView =
-- ..
The core building block used to build up HTML. Here we create an Html
value with no attributes and one child:
hello : Html model msg
hello =
div [] [ text "Hello!" ]
Html.Attribute msg
Set attributes on your Html
. Learn more in the
Html.Attributes
module.
text : String -> Html model msg
Just put plain text in the DOM. It will escape the string so that it appears exactly as you specify.
text "Hello World!"
node : String -> List (Attribute msg) -> List (Html model msg) -> Html model msg
General way to create HTML nodes. It is used to define all of the helper functions in this library.
div : List (Attribute msg) -> List (Html msg) -> Html msg
div attributes children =
node "div" attributes children
You can use this to create custom nodes if you need to create something that is not covered by the helper functions in this library.
map : (a -> msg) -> Html model a -> Html model msg
Transform the messages produced by some Html
. In the following example,
we have viewButton
that produces ()
messages, and we transform those values
into Msg
values in view
.
type Msg
= Left
| Right
view : model -> Html Msg
view model =
div []
[ map (\_ -> Left) (viewButton "Left")
, map (\_ -> Right) (viewButton "Right")
]
viewButton : String -> Html ()
viewButton name =
button [ onClick () ] [ text name ]
This should not come in handy too often. Definitely read this before deciding if this is what you want.
h1 : List (Attribute msg) -> List (Html model msg) -> Html model msg
h2 : List (Attribute msg) -> List (Html model msg) -> Html model msg
h3 : List (Attribute msg) -> List (Html model msg) -> Html model msg
h4 : List (Attribute msg) -> List (Html model msg) -> Html model msg
h5 : List (Attribute msg) -> List (Html model msg) -> Html model msg
h6 : List (Attribute msg) -> List (Html model msg) -> Html model msg
div : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a generic container with no special meaning.
p : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a portion that should be displayed as a paragraph.
hr : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a thematic break between paragraphs of a section or article or any longer content.
pre : List (Attribute msg) -> List (Html model msg) -> Html model msg
Indicates that its content is preformatted and that this format must be preserved.
blockquote : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a content that is quoted from another source.
span : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents text with no specific meaning. This has to be used when no other
text-semantic element conveys an adequate meaning, which, in this case, is
often brought by global attributes like class
, lang
, or dir
.
a : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a hyperlink, linking to another resource.
code : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents computer code.
em : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents emphasized text, like a stress accent.
strong : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents especially important text.
i : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents some text in an alternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought, or a ship name.
b : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a text which to which attention is drawn for utilitarian purposes. It doesn't convey extra importance and doesn't imply an alternate voice.
u : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a non-textual annoatation for which the conventional presentation is underlining, such labeling the text as being misspelt or labeling a proper name in Chinese text.
sub : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represent a subscript.
sup : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represent a superscript.
br : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a line break.
ol : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines an ordered list of items.
ul : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines an unordered list of items.
li : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a item of an enumeration list.
dl : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a definition list, that is, a list of terms and their associated definitions.
dt : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a term defined by the next dd
.
dd : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the definition of the terms immediately listed before it.
img : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents an image.
iframe : List (Attribute msg) -> List (Html model msg) -> Html model msg
Embedded an HTML document.
canvas : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a bitmap area for graphics rendering.
math : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a mathematical formula.
form : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a form, consisting of controls, that can be submitted to a server for processing.
input : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a typed data field allowing the user to edit the data.
textarea : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a multiline text edit control.
button : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a button.
select : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a control allowing selection among a set of options.
option : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents an option in a select
element or a suggestion of a datalist
element.
section : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a section in a document.
nav : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a section that contains only navigation links.
article : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines self-contained content that could exist independently of the rest of the content.
aside : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines some content loosely related to the page content. If it is removed, the remaining content still makes sense.
header : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines the header of a page or section. It often contains a logo, the title of the web site, and a navigational table of content.
footer : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines the footer for a page or section. It often contains a copyright notice, some links to legal information, or addresses to give feedback.
address : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a section containing contact information.
main_ : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines the main or important content in the document. There is only one
main
element in the document.
body : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the content of an HTML document. There is only one body
element in a document.
figure : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a figure illustrated as part of the document.
figcaption : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the legend of a figure.
table : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents data with more than one dimension.
caption : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the title of a table.
colgroup : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a set of one or more columns of a table.
col : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a column of a table.
tbody : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the block of rows that describes the concrete data of a table.
thead : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the block of rows that describes the column labels of a table.
tfoot : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the block of rows that describes the column summaries of a table.
tr : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a row of cells in a table.
td : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a data cell in a table.
th : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a header cell in a table.
fieldset : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a set of controls.
legend : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the caption for a fieldset
.
label : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the caption of a form control.
datalist : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a set of predefined options for other controls.
optgroup : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a set of options, logically grouped.
keygen : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a key-pair generator control.
output : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the result of a calculation.
progress : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the completion progress of a task.
meter : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a scalar measurement (or a fractional value), within a known range.
audio : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a sound or audio stream.
video : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a video, the associated audio and captions, and controls.
source : List (Attribute msg) -> List (Html model msg) -> Html model msg
Allows authors to specify alternative media resources for media elements
like video
or audio
.
track : List (Attribute msg) -> List (Html model msg) -> Html model msg
Allows authors to specify timed text track for media elements like video
or audio
.
embed : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a integration point for an external, often non-HTML, application or interactive content.
object : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents an external resource, which is treated as an image, an HTML sub-document, or an external resource to be processed by a plug-in.
param : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines parameters for use by plug-ins invoked by object
elements.
ins : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines an addition to the document.
del : List (Attribute msg) -> List (Html model msg) -> Html model msg
Defines a removal from the document.
small : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a side comment, that is, text like a disclaimer or a copyright, which is not essential to the comprehension of the document.
cite : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the title of a work.
dfn : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a term whose definition is contained in its nearest ancestor content.
abbr : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents an abbreviation or an acronym; the expansion of the abbreviation can be represented in the title attribute.
time : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a date and time value; the machine-readable equivalent can be represented in the datetime attribute.
var : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a variable. Specific cases where it should be used include an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.
samp : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the output of a program or a computer.
kbd : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents user input, often from the keyboard, but not necessarily; it may represent other input, like transcribed voice commands.
s : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents content that is no longer accurate or relevant.
q : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents an inline quotation.
mark : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents text highlighted for reference purposes, that is for its relevance in another context.
ruby : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents content to be marked with ruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.
rt : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the text of a ruby annotation.
rp : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
bdi : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows embedding a span of text with a different, or unknown, directionality.
bdo : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents the directionality of its children, in order to explicitly override the Unicode bidirectional algorithm.
wbr : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a line break opportunity, that is a suggested point for wrapping text in order to improve readability of text split on several lines.
details : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a widget from which the user can obtain additional information or controls.
summary : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a summary, caption, or legend for a given details
.
menuitem : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a command that the user can invoke.
menu : List (Attribute msg) -> List (Html model msg) -> Html model msg
Represents a list of commands.