Module Fmlib_browser.Attribute

Attributes of Dom Elements.

There are four types of attributes:

Sometimes the distinction between properties and attributes is quite subtle. To the best of my knowledge each added attribute adds a property with the same name (except when the name is a javascript keyword like "class") to the html element. But not all properties even if it is a string value adds an attribute to the element.

Generic Interface

 

type 'msg t

Type of an attribute potentially generating a message of type 'msg.

val style : string -> string -> 'msg t

style key value Add a style attribute to the html element.

Examples:

style "color"  "red"
style "margin" "20px"
val property : string -> Value.t -> 'msg t

property key value Add a javascript property to the html element.

val attribute : string -> string -> 'msg t

attribute key value Add an attribute to the html element.

Examples:

attribute "id" "my_element"
attribute "class" "container"
val handler : string -> Event_flag.stop -> Event_flag.prevent -> 'msg Decoder.t -> 'msg t

handler event_type stop_flag prevent_flag decoder

Attribute representing an event listener on an html element. The two flags decide if the event is propagated upwards in the dom tree and if default action (some events like clicking on an anchor element cause default actions in the browser) is prevented.

The decoder decodes the javascript event object into a message of type 'msg.

Starting from the event object information from the whole dom tree up to the root can be decode. Each event object has a target (which is the element on which it is fired). The target element has a tag name, can have various properties etc. For more details on event objects see the event api.

More information on event handlers.

val map : ('a -> 'b) -> 'a t -> 'b t

map f a Map an attribute creating messages of type 'a to an attribute creating messages of type 'b.

Handler

val on : string -> 'msg Decoder.t -> 'msg t

on event_type decoder

is equivalent to handler event_type Event_flag.no_stop Event_flag.no_prevent decoder

val on_click : 'msg -> 'msg t

on_click m produce the message m on mouse click.

Common style attributes

val font_size : string -> 'msg t

Example font_size "20px"

Abbreviates style "font-size" "20px".

val color : string -> 'msg t

Example color "red"

Abbreviates style "color" "red".

val background_color : string -> 'msg t

Example background_color "powderblue"

Abbreviates style "background-color" "powderblue".

val height : string -> 'msg t

Example height "200px"

Abbreviates style "height" "200px".

val width : string -> 'msg t

Example width "200px"

Abbreviates style "width" "200px".

Margin, border, padding and content

               +--------------------------------+
               |         margin                 |
               |  +----border-----------------+ |
               |  |      padding              | |
               |  |   +---------------------+ | |
               |  |   |                     | | |
               |  |   |                     | | |
               |  |   |      content        | | |
               |  |   |                     | | |
               |  |   +---------------------+ | |
               |  +---------------------------+ |
               |                                |
               +--------------------------------+
val margin : string -> 'msg t

Examples

margin "25px"
margin "25px 50px"              top/bottom 25px, left/right 50px
margin "25px 50px 75px 100px"   top, right, bottom, left

margin str abbreviates style "margin" str

val padding : string -> 'msg t

Examples

padding "25px"
padding "25px 50px"              top/bottom 25px, left/right 50px
padding "25px 50px 75px 100px"   top, right, bottom, left

padding str abbreviates style "padding" str

val border_style : string -> 'msg t

Examples

border_style "solid"
border_style "dotted"
border_style "dashed"

border_style str abbreviates style "border-style" str

val border_width : string -> 'msg t

Examples

border_width "3px"
border_width "thick"
border_width "medium"
val border_color : string -> 'msg t

Example

border_color "red"

Common attributes

val id : string -> 'msg t

"id" attribute

val class_ : string -> 'msg t

"class" attribute

val href : string -> 'msg t

"href" attribute

val src : string -> 'msg t

"src" attribute

val title : string -> 'msg t

"title" attribute to display tooltips

Input elements

val value : string -> 'msg t

The value property of the element (usually an input element)

Each time the user enters something to the input element (text for input type 'text', slider position for input type 'range', date for input type 'date'), the value property changes. Using the value property in the virtual dom overwrites whatever the user has written into the input element. Using a 'value' attribute in the virtual dom does *not* overwrite the user value.

val placeholder : string -> 'msg t
val on_input : (string -> 'msg) -> 'msg t