package virtual_dom

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

A set of functions to generate css declaration lists. This library can be used to programmatically produce strings suitable for the HTML style attribute, e.g. style="display:flex;background-color:red".

type css_global_values = [
  1. | `Inherit
  2. | `Initial
]
val sexp_of_css_global_values : css_global_values -> Sexplib0.Sexp.t
val css_global_values_of_sexp : Sexplib0.Sexp.t -> css_global_values
val __css_global_values_of_sexp__ : Sexplib0.Sexp.t -> css_global_values
val compare_css_global_values : css_global_values -> css_global_values -> int
module Color : sig ... end
module Length : sig ... end
module Auto_or_length : sig ... end
type t
include Sexplib0.Sexpable.S with type t := t
val t_of_sexp : Sexplib0__.Sexp.t -> t
val sexp_of_t : t -> Sexplib0__.Sexp.t
include Ppx_compare_lib.Comparable.S with type t := t
val compare : t Base__Ppx_compare_lib.compare
include Core.Bin_prot.Binable.S with type t := t
val bin_size_t : t Bin_prot__.Size.sizer
val bin_write_t : t Bin_prot__.Write.writer
val bin_read_t : t Bin_prot__.Read.reader
val __bin_read_t__ : (int -> t) Bin_prot__.Read.reader
val bin_shape_t : Bin_prot__.Shape.t
val bin_writer_t : t Bin_prot__.Type_class.writer
val bin_reader_t : t Bin_prot__.Type_class.reader
val bin_t : t Bin_prot__.Type_class.t
val create : field:string -> value:string -> t

Create a single property, value pair (a declaration in CSS parlance). The value must be a valid CSS literal. We do run a simple CSS parser on the value to validate this and will throw an exception if that parser fails. Note that the parser is less forgiving than many browsers. That is browsers will silently accept or drop many illegal constructs. We prefer to raise on them, so that errors are detected earlier.

It is recommended to use one of the other constructors instead if they are available. If they are not, consider adding them to this library.

val empty : t
val is_empty : t -> bool
val position : ?top:Length.t -> ?bottom:Length.t -> ?left:Length.t -> ?right:Length.t -> [ `Static | `Absolute | `Sticky | `Relative | `Fixed ] -> t

Set the position attribute and optionally top, bottom,left,right Note that left and top have no effect when position is `Static.

val top : Length.t -> t

Add the top property alone.

val bottom : Length.t -> t

Add the bottom property alone.

val left : Length.t -> t

Add the left property alone.

val right : Length.t -> t

Add the right property alone.

val combine : t -> t -> t

Neither combine nor concat validate that each t is unique. For combine x y, y will override x if they are the same attribute. For concat l, the greatest index of an attribute will prevail.

val (@>) : t -> t -> t
val concat : t list -> t
val to_string_list : t -> (string * string) list
val to_string_css : t -> string
val of_string_css_exn : string -> t

The inverse of to_string_css. Primarily useful if you want to reuse a css literal from the web (aka copy paste web design). Raises if the string fails validation. See create for comments on the validation we do.

val box_sizing : [ `Content_box | `Border_box | css_global_values ] -> t
val display : [ `Inline | `Block | `Inline_block | `List_item | `Table | `Inline_table | `None | `Inline_grid | css_global_values ] -> t
val visibility : [ `Visible | `Hidden | `Collapse | css_global_values ] -> t
type overflow = [
  1. | `Visible
  2. | `Hidden
  3. | `Scroll
  4. | `Auto
  5. | css_global_values
]
val overflow : overflow -> t
val overflow_x : overflow -> t
val overflow_y : overflow -> t
val z_index : int -> t
val opacity : float -> t
type font_style = [
  1. | `Normal
  2. | `Italic
  3. | `Oblique
  4. | css_global_values
]
type font_weight = [
  1. | `Normal
  2. | `Bold
  3. | `Bolder
  4. | `Lighter
  5. | `Number of int
  6. | css_global_values
]
type font_variant = [
  1. | `Normal
  2. | `Small_caps
  3. | css_global_values
]
val font_size : Length.t -> t
val font_family : string list -> t
val font_style : font_style -> t
val font_weight : font_weight -> t
val font_variant : font_variant -> t
val font : size:Length.t -> family:string list -> ?style:font_style -> ?weight:font_weight -> ?variant:font_variant -> unit -> t
val bold : t
type stops = (Core.Percent.t * Color.t) list
type linear_gradient = {
  1. direction : [ `Deg of int ];
  2. stops : stops;
}
type radial_gradient = {
  1. stops : stops;
}
type background_image = [
  1. | `Url of string
  2. | `Linear_gradient of linear_gradient
  3. | `Radial_gradient of radial_gradient
]
type text_align = [
  1. | `Left
  2. | `Right
  3. | `Center
  4. | `Justify
  5. | css_global_values
]
val create_with_color : field:string -> color:[< Color.t ] -> t
val color : [< Color.t ] -> t
val background_color : [< Color.t ] -> t
val background_image : background_image -> t
val fill : Color.t -> t
val text_align : text_align -> t
val horizontal_align : [ `Left | `Right | `Center | css_global_values ] -> t
val vertical_align : [ `Top | `Bottom | `Middle | `Super | `Sub | css_global_values ] -> t
val white_space : [ `Normal | `Nowrap | `Pre | `Pre_line | `Pre_wrap | css_global_values ] -> t
val float : [ `None | `Left | `Right | css_global_values ] -> t
val line_height : Length.t -> t
val width : Length.t -> t
val min_width : Length.t -> t
val max_width : Length.t -> t
val height : Length.t -> t
val min_height : Length.t -> t
val max_height : Length.t -> t
val padding_top : Length.t -> t
val padding_bottom : Length.t -> t
val padding_left : Length.t -> t
val padding_right : Length.t -> t
val uniform_padding : Length.t -> t
val row_gap : Length.t -> t
val column_gap : Length.t -> t
val padding : ?top:Length.t -> ?bottom:Length.t -> ?left:Length.t -> ?right:Length.t -> unit -> t
val margin_top : Auto_or_length.t -> t
val margin_bottom : Auto_or_length.t -> t
val margin_left : Auto_or_length.t -> t
val margin_right : Auto_or_length.t -> t
val uniform_margin : Auto_or_length.t -> t
val margin : ?top:Auto_or_length.t -> ?bottom:Auto_or_length.t -> ?left:Auto_or_length.t -> ?right:Auto_or_length.t -> unit -> t
type border_style = [
  1. | `None
  2. | `Hidden
  3. | `Dotted
  4. | `Dashed
  5. | `Solid
  6. | `Double
  7. | `Groove
  8. | `Ridge
  9. | `Inset
  10. | `Outset
  11. | css_global_values
]
val border_top : ?width:Length.t -> ?color:[< Color.t ] -> style:border_style -> unit -> t
val border_bottom : ?width:Length.t -> ?color:[< Color.t ] -> style:border_style -> unit -> t
val border_left : ?width:Length.t -> ?color:[< Color.t ] -> style:border_style -> unit -> t
val border_right : ?width:Length.t -> ?color:[< Color.t ] -> style:border_style -> unit -> t
val border : ?width:Length.t -> ?color:[< Color.t ] -> style:border_style -> unit -> t
val border_radius : Length.t -> t
val border_collapse : [ `Separate | `Collapse | css_global_values ] -> t
val border_spacing : Length.t -> t
val outline : ?width:Length.t -> ?color:[< Color.t ] -> style:border_style -> unit -> t
type text_decoration_line = [
  1. | `None
  2. | `Underline
  3. | `Overline
  4. | `Line_through
  5. | css_global_values
]
type text_decoration_style = [
  1. | `Solid
  2. | `Double
  3. | `Dotted
  4. | `Dashed
  5. | `Wavy
  6. | css_global_values
]
val text_decoration : ?style:text_decoration_style -> ?color:[< Color.t ] -> line:text_decoration_line list -> unit -> t
type item_alignment = [
  1. | `Auto
  2. | `Flex_start
  3. | `Flex_end
  4. | `Center
  5. | `Baseline
  6. | `Stretch
]
type content_alignment = [
  1. | `Normal
  2. | `Flex_start
  3. | `Flex_end
  4. | `Center
  5. | `Space_between
  6. | `Space_around
  7. | `Space_evenly
  8. | `Stretch
]
type justify_content = [
  1. | `Flex_start
  2. | `Flex_end
  3. | `Center
  4. | `Space_between
  5. | `Space_around
  6. | `Space_evenly
]
val flex_container : ?inline:bool -> ?direction:[ `Row | `Row_reverse | `Column | `Column_reverse | `Default ] -> ?wrap:[ `Nowrap | `Wrap | `Wrap_reverse | `Default ] -> ?align_items:item_alignment -> ?align_content:content_alignment -> ?justify_content:justify_content -> ?row_gap:Length.t -> ?column_gap:Length.t -> unit -> t
val flex_item : ?order:int -> ?basis:Auto_or_length.t -> ?shrink:float -> grow:float -> unit -> t
val align_self : item_alignment -> t
val resize : [ `None | `Both | `Horizontal | `Vertical | css_global_values ] -> t
val animation : name:string -> duration:Core.Time_ns.Span.t -> ?delay:Core.Time_ns.Span.t -> ?direction: [ `Normal | `Reverse | `Alternate | `Alternate_reverse | css_global_values ] -> ?fill_mode:[ `None | `Forwards | `Backwards | `Both | css_global_values ] -> ?iter_count:int -> ?timing_function:string -> unit -> t

Note: You must include the names @keyframes in the stylesheet

type user_select = [
  1. | `All
  2. | `Auto
  3. | `None
  4. | `Text
]
val user_select : user_select -> t
module Stable : sig ... end
module Expert : sig ... end
module Private : sig ... end
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