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 'a css_global_values = [
  1. | `Inherit
  2. | `Initial
  3. | `Var of string
  4. | `Var_with_default of string * 'a
]
val sexp_of_css_global_values : ('a -> Sexplib0.Sexp.t) -> 'a css_global_values -> Sexplib0.Sexp.t
val css_global_values_of_sexp : (Sexplib0.Sexp.t -> 'a) -> Sexplib0.Sexp.t -> 'a css_global_values
val __css_global_values_of_sexp__ : (Sexplib0.Sexp.t -> 'a) -> Sexplib0.Sexp.t -> 'a css_global_values
val compare_css_global_values : ('a -> 'a -> int) -> 'a css_global_values -> 'a css_global_values -> int
val css_global_values_sexp_grammar : 'a Sexplib0.Sexp_grammar.t -> 'a css_global_values Sexplib0.Sexp_grammar.t
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 Ppx_compare_lib.Equal.S with type t := t
val equal : t Base__Ppx_compare_lib.equal
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.

type box_sizing = [
  1. | `Content_box
  2. | `Border_box
  3. | box_sizing css_global_values
]
val box_sizing : box_sizing -> t
type display = [
  1. | `Inline
  2. | `Block
  3. | `Inline_block
  4. | `List_item
  5. | `Table
  6. | `Inline_table
  7. | `None
  8. | `Inline_grid
  9. | display css_global_values
]
val display : display -> t
type visibility = [
  1. | `Visible
  2. | `Hidden
  3. | `Collapse
  4. | visibility css_global_values
]
val visibility : visibility -> t
type overflow = [
  1. | `Visible
  2. | `Hidden
  3. | `Scroll
  4. | `Auto
  5. | overflow 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. | font_style css_global_values
]
type font_weight = [
  1. | `Normal
  2. | `Bold
  3. | `Bolder
  4. | `Lighter
  5. | `Number of int
  6. | font_weight css_global_values
]
type font_variant = [
  1. | `Normal
  2. | `Small_caps
  3. | font_variant 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. | text_align css_global_values
]
type horizontal_align = [
  1. | `Left
  2. | `Right
  3. | `Center
  4. | horizontal_align css_global_values
]
type vertical_align = [
  1. | `Top
  2. | `Bottom
  3. | `Middle
  4. | `Super
  5. | `Sub
  6. | vertical_align css_global_values
]
type white_space = [
  1. | `Normal
  2. | `Nowrap
  3. | `Pre
  4. | `Pre_line
  5. | `Pre_wrap
  6. | white_space 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 : horizontal_align -> t
val vertical_align : vertical_align -> t
val white_space : white_space -> t
val float : [ `None | `Left | `Right | 'float css_global_values ] as 'float -> 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. | border_style 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
type border_collapse = [
  1. | `Separate
  2. | `Collapse
  3. | border_collapse css_global_values
]
val border_collapse : border_collapse -> 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. | text_decoration_line css_global_values
]
type text_decoration_style = [
  1. | `Solid
  2. | `Double
  3. | `Dotted
  4. | `Dashed
  5. | `Wavy
  6. | text_decoration_style 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
type resize = [
  1. | `None
  2. | `Both
  3. | `Horizontal
  4. | `Vertical
  5. | resize css_global_values
]
val resize : resize -> t
type direction = [
  1. | `Normal
  2. | `Reverse
  3. | `Alternate
  4. | `Alternate_reverse
  5. | direction css_global_values
]
type fill_mode = [
  1. | `None
  2. | `Forwards
  3. | `Backwards
  4. | `Both
  5. | fill_mode css_global_values
]
val animation : name:string -> duration:Core.Time_ns.Span.t -> ?delay:Core.Time_ns.Span.t -> ?direction:direction -> ?fill_mode:fill_mode -> ?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