package bonsai
Install
Dune Dependency
Authors
Maintainers
Sources
sha256=1d68aab713659951eba5b85f21d6f9382e0efa8579a02c3be65d9071c6e86303
doc/bonsai.web_ui_view/Bonsai_web_ui_view/index.html
Module Bonsai_web_ui_viewSource
Overview
The Vdom.Node and Vdom.Attr modules contain primitives for constructing virtual-dom nodes which mirror the browsers DOM API. This is great for users who know exactly what they want the document to contain, but all-things-considered, is a pretty low-level interface.
Bonsai_web.View is - at its core - a higher-level API for building Vdom.*.t, for people who want a button element, and would like to avoid boilerplate for common elements like buttons:
Vdom.Node.button
~attr:(Vdom.Attr.on_click (fun _ -> do_thing))
[ Vdom.Node.text "click me" ]
;; (* vs *)
View.button theme ~on_click:do_thing "click me"or basic layout primitives:
Vdom.Node.div
~attr:(Vdom.Attr.style (Css_gen.flex_container ~direction:`Row ~wrap:`Wrap ()))
[a; b; c]
;; (* vs *)
View.hbox ~wrap:Wrap [a; b; c]Theming
Another big focus of the View module is an API for building composable, extendable, and customizable themes. All of the View.* functions which take a View.Theme.t as the first argument are handing over basic "look and feel" decisions to the provided theme. However, themes are extendable by the user of that theme, allowing minor changes like color choices, but also the power to completely override rendering of specific components if necessary.
Constants
Themes have a set of associated constants, which can be accessed by the functions in this section. These constants may be overritten by calling Theme.override_constants_temporarily.
A getter for the constants in a theme.
An Intent.t is an indicator to the component that it should render the component differently. Usually this means incorporating the intent-colors as defined by the theme.
A getter for the "extreme" colors. Extreme colors mimic the primary colors, but have a higher contrast ratio.
A getter for the colors associated with a particular intent.
Text
The text functions render a <span> of text with optional attributes. textf can be used with format syntax.
val themed_text :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?intent:Intent.t ->
?style:Font_style.t ->
?size:Font_size.t ->
string ->
Virtual_dom.Vdom.Node.tval themed_textf :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?intent:Intent.t ->
?style:Font_style.t ->
?size:Font_size.t ->
'a format ->
'aLayout
Layout helper functions are used to wrap other vdom nodes inside a container. hbox and vbox both use css "flexbox", for more, read this documentation:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The only terminology difference between the css properties and our function arguments is that we refer to "justify-content" as "main_axis_alignment" and "align-items" as "cross_axis_alignment".
Layout helpers do not take a Theme.t as input because themes should not be able to influence a layout explicitly requested by the user.
val hbox :
?attrs:Virtual_dom.Vdom.Attr.t list ->
?gap:Css_gen.Length.t ->
?main_axis_alignment:Flex.Main_axis_alignment.t ->
?cross_axis_alignment:Flex.Cross_axis_alignment.t ->
?direction:Flex.Horizontal_dir.t ->
Virtual_dom.Vdom.Node.t list ->
Virtual_dom.Vdom.Node.tBuilds a flexbox container for elements and lays them out horizontally.
val vbox :
?attrs:Virtual_dom.Vdom.Attr.t list ->
?gap:Css_gen.Length.t ->
?main_axis_alignment:Flex.Main_axis_alignment.t ->
?cross_axis_alignment:Flex.Cross_axis_alignment.t ->
?direction:Flex.Vertical_dir.t ->
Virtual_dom.Vdom.Node.t list ->
Virtual_dom.Vdom.Node.tBuilds a flexbox container for elements and lays them out vertically.
val hbox_wrap :
?attrs:Virtual_dom.Vdom.Attr.t list ->
?row_gap:Css_gen.Length.t ->
?column_gap:Css_gen.Length.t ->
?main_axis_alignment:Flex.Main_axis_alignment.t ->
?cross_axis_alignment:Flex.Cross_axis_alignment.t ->
?direction:Flex.Horizontal_dir.t ->
?align_content:Flex.Align_content.t ->
Virtual_dom.Vdom.Node.t list ->
Virtual_dom.Vdom.Node.tA horizontal flexbox container whose content will wrap onto multiple rows if necessary
val vbox_wrap :
?attrs:Virtual_dom.Vdom.Attr.t list ->
?row_gap:Css_gen.Length.t ->
?column_gap:Css_gen.Length.t ->
?main_axis_alignment:Flex.Main_axis_alignment.t ->
?cross_axis_alignment:Flex.Cross_axis_alignment.t ->
?direction:Flex.Vertical_dir.t ->
?align_content:Flex.Align_content.t ->
Virtual_dom.Vdom.Node.t list ->
Virtual_dom.Vdom.Node.tA vertical flexbox container whose content will wrap onto multiple columns if necessary
Interactive Elements
These node constructors are for elements that the user interacts with.
val button :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?disabled:bool ->
?intent:Intent.t ->
?tooltip:string ->
on_click:unit Virtual_dom.Vdom.Effect.t ->
string ->
Virtual_dom.Vdom.Node.tBuilds a basic button with text for a label.
Optional and named arguments:
attr, if provided, will be attached to the topmost button element.disableddefaults to false. If provided (and set to true), the button will be marked as disabled and will be unclickable.intentis used by the theme to color and style the button to indicate the intent of the button.tooltipis used to display some text near the button when hovered.on_clickcontains an effect to schedule when the button is clicked
The unnamed string parameter is used as the label for the button
val button' :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?disabled:bool ->
?intent:Intent.t ->
?tooltip:string ->
on_click:unit Virtual_dom.Vdom.Effect.t ->
Virtual_dom.Vdom.Node.t list ->
Virtual_dom.Vdom.Node.tSame as button but the contents of the button are specified as a list of vdom nodes instead of as a string
val tooltip :
Theme.t ->
?container_attr:Virtual_dom.Vdom.Attr.t ->
?tooltip_attr:Virtual_dom.Vdom.Attr.t ->
?direction:Tooltip_direction.t ->
tooltip:string ->
string ->
Virtual_dom.Vdom.Node.tTooltips can be used to provide more information to a user when they hover over an element.
val tooltip' :
Theme.t ->
?container_attr:Virtual_dom.Vdom.Attr.t ->
?tooltip_attr:Virtual_dom.Vdom.Attr.t ->
?direction:Tooltip_direction.t ->
tooltip:Virtual_dom.Vdom.Node.t ->
Virtual_dom.Vdom.Node.t ->
Virtual_dom.Vdom.Node.ttooltip' is just like tooltip except that it allows both the tooltip and the wrapped element to be arbitrary vdom nodes instead of just string
val tabs :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?per_tab_attr:('a -> is_active:bool -> Virtual_dom.Vdom.Attr.t) ->
equal:('a -> 'a -> bool) ->
on_change:(from:'a -> to_:'a -> unit Virtual_dom.Vdom.Effect.t) ->
active:'a ->
('a * Virtual_dom.Vdom.Node.t) list ->
Virtual_dom.Vdom.Node.tBuilds a horizontally-aligned grouping of tabs, keyed on an item representing the tab, with one of those items serving to indicate the currently active tab.
val tabs_enum :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?per_tab_attr:('a -> is_active:bool -> Virtual_dom.Vdom.Attr.t) ->
?tab_to_vdom:('a -> Virtual_dom.Vdom.Node.t) ->
(module Enum with type t = 'a) ->
on_change:(from:'a -> to_:'a -> unit Virtual_dom.Vdom.Effect.t) ->
active:'a ->
Virtual_dom.Vdom.Node.tA helper function for tabs where the items representing the tabs are enumerable
val devbar :
Theme.t ->
?attrs:Virtual_dom.Vdom.Attr.t list ->
?count:int ->
?intent:Intent.t ->
string ->
Virtual_dom.Vdom.Node.tA devbar is the attention-catching bar across the top of an app to indicate that the user isn't on a production instance of the application.
val card :
Theme.t ->
?container_attr:Virtual_dom.Vdom.Attr.t ->
?title_attr:Virtual_dom.Vdom.Attr.t ->
?content_attr:Virtual_dom.Vdom.Attr.t ->
?intent:Intent.t ->
?title:string ->
?title_kind:Constants.Card_title_kind.t ->
?on_click:unit Virtual_dom.Vdom.Effect.t ->
string ->
Virtual_dom.Vdom.Node.tA "card" is a way of highlighting important messages, and to also bring some structure/sense of hierarchy to your app. This component is the conceptual equivalent of "paper" in other UI component frameworks/toolkits.
val card' :
Theme.t ->
?container_attr:Virtual_dom.Vdom.Attr.t ->
?title_attr:Virtual_dom.Vdom.Attr.t ->
?content_attr:Virtual_dom.Vdom.Attr.t ->
?intent:Intent.t ->
?title:Virtual_dom.Vdom.Node.t list ->
?title_kind:Constants.Card_title_kind.t ->
?on_click:unit Virtual_dom.Vdom.Effect.t ->
Virtual_dom.Vdom.Node.t list ->
Virtual_dom.Vdom.Node.t