Module Fmlib_browser.AttributeSource

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

 

Sourcetype 'msg t

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

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

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

Examples:

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

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

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

attribute key value Add an attribute to the html element.

Examples:

    attribute "id" "my_element"
    attribute "class" "container"
Sourceval 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.

Sourceval 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

Sourceval 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

Sourceval on_click : 'msg -> 'msg t

on_click m produce the message m on mouse click.

Common style attributes

Sourceval font_size : string -> 'msg t

Example font_size "20px"

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

Sourceval color : string -> 'msg t

Example color "red"

Abbreviates style "color" "red".

Sourceval background_color : string -> 'msg t

Example background_color "powderblue"

Abbreviates style "background-color" "powderblue".

Sourceval height : string -> 'msg t

Example height "200px"

Abbreviates style "height" "200px".

Sourceval width : string -> 'msg t

Example width "200px"

Abbreviates style "width" "200px".

Margin, border, padding and content

       +--------------------------------+
       |         margin                 |
       |  +----border-----------------+ |
       |  |      padding              | |
       |  |   +---------------------+ | |
       |  |   |                     | | |
       |  |   |                     | | |
       |  |   |      content        | | |
       |  |   |                     | | |
       |  |   +---------------------+ | |
       |  +---------------------------+ |
       |                                |
       +--------------------------------+
Sourceval 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

Sourceval 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

Sourceval border_style : string -> 'msg t

Examples

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

border_style str abbreviates style "border-style" str

Sourceval border_width : string -> 'msg t

Examples

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

Example

    border_color "red"

Common attributes

Sourceval id : string -> 'msg t

"id" attribute

Sourceval class_ : string -> 'msg t

"class" attribute

Sourceval href : string -> 'msg t

"href" attribute

Sourceval src : string -> 'msg t

"src" attribute

Sourceval title : string -> 'msg t

"title" attribute to display tooltips

Input elements

Sourceval 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.

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