package virtual_dom

  1. Overview
  2. Docs
Legend:
Library
Module
Module type
Parameter
Class
Class type
module Call_on_input_when : sig ... end
val raw : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?disabled:bool -> ?placeholder:string -> ?on_return:(unit -> unit Virtual_dom.Vdom.Effect.t) -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:string -> on_input:(string -> unit Virtual_dom.Vdom.Effect.t) -> unit -> Virtual_dom.Vdom.Node.t

Creates a text input where the value is *exactly* what is displayed in the box. If you change value, it will change the value out from under the user, even if they have the box focused. This is one solution for specific use-cases where pressing Enter will submit the value and you want to clear the box as a result.

on_return is called when the user presses the enter key with the text box focused.

val of_stringable : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> (module Core.Stringable.S with type t = 'a) -> value:'a option -> on_input:('a option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> Virtual_dom.Vdom.Node.t

Creates a text input of some serializable type. If of_string raises an exception, None is returned.

val validated : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?on_return:(unit -> unit Virtual_dom.Vdom.Effect.t) -> ?merge_behavior:Merge_behavior.t -> ?key:string -> (module Core.Stringable with type t = 'a) -> value:'a Validated.t -> on_input:('a Validated.update -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> Virtual_dom.Vdom.Node.t

Creates a text input of a serializable type, wrapping it in a type that stores either a valid input or last invalid string.

Note that you usually need to use Validated.merge in your action handler.

To provide visual feedback to user, use css with selector on aria-invalid, e.g.

        input[aria-invalid="true"] {
          bg-color: red;
        }

If you ever change ~value to be Validated.initial_empty, it will clear the contents of the box regardless of whether the user has focus.

val text : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:string option -> on_input:(string option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> unit -> Virtual_dom.Vdom.Node.t

Creates a text input that equates an empty input with None and a non-empty input as Some string.

val password : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> allow_updates_when_focused:[ `Always | `Never ] -> value:string option -> on_input:(string option -> unit Virtual_dom.Vdom.Effect.t) -> unit -> Virtual_dom.Vdom.Node.t

Creates a password input that equates an empty input with None and a non-empty input as Some string.

val number : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> (module Core.Stringable.S with type t = 'a) -> value:'a option -> step:float -> on_input:('a option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> Virtual_dom.Vdom.Node.t

Creates a number input that equates an empty input with None and a non-empty input as Some 'a. Because number input values are represented as strings in HTML, you can use any module that deserializes integral values. If of_string raises an exception, None is returned. Note that step controls how up/down increments/decrements the value and does not enforce that the value is a multiple of step.

You cannot use Float because of the way the default to_string adds trailing periods to whole numbers like "0.". Use Decimal exported from this library instead.

val range : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> (module Core.Stringable.S with type t = 'a) -> value:'a option -> step:float -> on_input:('a option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> Virtual_dom.Vdom.Node.t

A slider bar. Roughly equivalent to number, but with a different appearance. We still need to take a Stringable.S interface because the browser only gives us values as strings.

val time : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:Core.Time_ns.Ofday.t option -> on_input:(Core.Time_ns.Ofday.t option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> unit -> Virtual_dom.Vdom.Node.t

Creates a time input that equates an empty input with None and a non-empty input as Some Time_ns.Ofday.t.

val date : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:Core.Date.t option -> on_input:(Core.Date.t option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> unit -> Virtual_dom.Vdom.Node.t

Creates a date input that equates an empty input with None and a non-empty input as Some Date.t.

val datetime_local : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?utc_offset:Core.Time_ns.Span.t -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:Core.Time_ns.t option -> on_input:(Core.Time_ns.t option -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> unit -> Virtual_dom.Vdom.Node.t

Creates a time input that equates an empty input with None and a non-empty input as Some Time_ns.t.

Because the underlying datepicker expects the datetime_local to be specified in the format yyyy-MM-ddThh:mm with optional ":ss" or ":ss.SSS" when using this widget a timezone should be specified.

val text_area : ?extra_attrs:Virtual_dom.Vdom.Attr.t list -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?placeholder:string -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:string -> on_input:(string -> unit Virtual_dom.Vdom.Effect.t) -> allow_updates_when_focused:[ `Always | `Never ] -> unit -> Virtual_dom.Vdom.Node.t

Creates a textarea input without a None representation.

val color_picker : ?extra_attr:Virtual_dom.Vdom.Attr.t -> ?call_on_input_when:Call_on_input_when.t -> ?disabled:bool -> ?merge_behavior:Merge_behavior.t -> ?key:string -> value:[ `Hex of string ] -> on_input:([> `Hex of string ] -> unit Virtual_dom.Vdom.Effect.t) -> unit -> Virtual_dom.Vdom.Node.t

Creates a color input that produces values are of the form (`Hex color) where color is a hexadecimal string like "#ffcc00". Note that using ~call_on_input_when:Text_changed fires the on_input callback whenever a new color is selected.

OCaml

Innovation. Community. Security.