package virtual_dom

  1. Overview
  2. Docs
package virtual_dom
Legend:
Library
Module
Module type
Parameter
Class
Class type
type t

This type covers both properties and attributes, despite the name.

val create : Base.string -> Base.string -> t

create name value creates a simple string-only attribute

val create_float : Base.string -> Base.float -> t

create_float name float creates a simple float-only attribute

val string_property : Base.string -> Base.string -> t

string_property name value creates a simple string-only property

val bool_property : Base.string -> Base.bool -> t

bool_property name value creates a simple bool-only property

val property : Base.string -> Js_of_ocaml.Js.Unsafe.any -> t

property name value creates a property with a generic value

val suppress_merge_warnings : t -> t

This function does not affect hooks, styles, classes, or on_* handlers, since warnings due to merging those can be avoided. It allows disabling warnings for attributes that are unmergeable. Note that no merging behavior is changed by this function - it only changes whether warnings are emitted.

Example: If href is already on a node, then adding a suppress_merge_warning (href input) attribute to the node will not trigger a warning. However, adding another href which does not use suppress_merge_warnings to the node will again emit a warning. In other words, this function only suppresses warnings for an instance of an attribute, not all attributes of the same type. *

val create_hook : Base.string -> Virtual_dom__.Hooks.t -> t

create_hook name hook creates a hook attribute with a name

val many : t Base.list -> t

many merges several attributes into one. It merges hooks, on_* event handlers, classes, and styles.

  • Hooks get merged via their Input.combine function
  • All handlers get runin the order they appear
  • The set of classes is unioned
  • Styles are merged via concatenation
val many_without_merge : t Base.list -> t
val empty : t

Equivalent to many []. It adds no attributes to the DOM.

val (@) : t -> t -> t

Equivalent to combine

val combine : t -> t -> t

Equivalent to many [x; y]

val autofocus : Base.bool -> t
val checked : t
val class_ : Base.string -> t
val classes : Base.string Base.list -> t
val classes' : Base.Set.M(Base.String).t -> t
val disabled : t
val for_ : Base.string -> t
val href : Base.string -> t
val target : Base.string -> t
val id : Base.string -> t
val name : Base.string -> t
val placeholder : Base.string -> t
val selected : t
val hidden : t
val readonly : t
val style : Css_gen.t -> t
val min : Base.float -> t
val max : Base.float -> t
val colspan : Base.int -> t
val rowspan : Base.int -> t
val draggable : Base.bool -> t
val tabindex : Base.int -> t
val type_ : Base.string -> t
val value : Base.string -> t
val value_prop : Base.string -> t
val title : Base.string -> t
val src : Base.string -> t
val on_focus : (Js_of_ocaml.Dom_html.focusEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_blur : (Js_of_ocaml.Dom_html.focusEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
module Unmerged_warning_mode : sig ... end
val to_raw : t -> Virtual_dom__.Gen_js_api.Ojs.t
val on_input : (Js_of_ocaml.Dom_html.event Js_of_ocaml.Js.t -> Base.string -> Base.unit Ui_effect.t) -> t

on_input fires every time the input changes, i.e., whenever a key is pressed in the input field. The current contents are returned as an OCaml string as a convenience

val on_change : (Js_of_ocaml.Dom_html.event Js_of_ocaml.Js.t -> Base.string -> Base.unit Ui_effect.t) -> t

on_change fires when the input is complete, i.e., when enter is pressed in the input field or the input field loses focus. The current contents are returned as an OCaml string as a convenience

val on_file_input : (Js_of_ocaml.Dom_html.event Js_of_ocaml.Js.t -> Js_of_ocaml.File.fileList Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t

on_file_input is like on_input but for file picker input elements (i.e. type=file). Instead of passing the value of the input as a string, the list of selected files is passed.

See Vdom_input_widgets.File_select, or, if you are a bonsai user, Bonsai_web_ui_form.Elements.File_select, for a convenient API that wraps this.

val on_click : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_contextmenu : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_double_click : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_drag : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_dragstart : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_dragend : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_dragenter : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_dragleave : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_dragover : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_drop : (Js_of_ocaml.Dom_html.dragEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mousemove : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mouseup : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mousedown : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mouseenter : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mouseleave : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mouseover : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mouseout : (Js_of_ocaml.Dom_html.mouseEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_keyup : (Js_of_ocaml.Dom_html.keyboardEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_keypress : (Js_of_ocaml.Dom_html.keyboardEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_keydown : (Js_of_ocaml.Dom_html.keyboardEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_scroll : (Js_of_ocaml.Dom_html.event Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_submit : (Js_of_ocaml.Dom_html.submitEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_pointerdown : (Js_of_ocaml.Dom_html.pointerEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_pointerup : (Js_of_ocaml.Dom_html.pointerEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_mousewheel : (Js_of_ocaml.Dom_html.mousewheelEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_copy : (Js_of_ocaml.Dom_html.clipboardEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_cut : (Js_of_ocaml.Dom_html.clipboardEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_paste : (Js_of_ocaml.Dom_html.clipboardEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_reset : (Js_of_ocaml.Dom_html.event Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
val on_animationend : (Js_of_ocaml.Dom_html.animationEvent Js_of_ocaml.Js.t -> Base.unit Ui_effect.t) -> t
module Multi : sig ... end

A collection of CSS attributes.

module Always_focus_hook : sig ... end
module Single_focus_hook () : sig ... end
module Expert : sig ... end
module Hooks : sig ... end
module Global_listeners : sig ... end

Hooks to set mouse events listeners on window. This is needed as if we only set them on individual elements we will miss ones that happen outside of the viewport

OCaml

Innovation. Community. Security.

GitHub Discord Twitter Peertube RSS
About
Changelog Releases Industrial Users Academic Users Why OCaml
Ecosystem
Packages Community Events OCaml Planet Jobs
Resources
Install OCaml Get Started Platform Tools Language Manual Standard Library API Books Exercises Papers OCaml Playground Logo
Policies
Carbon Footprint Governance Privacy Code of Conduct