Module Ui.Group

Element groups.

Groups allow to gather and layout GUI elements and summarize their actions. See the styling information.

Groups

type dir = [
| `H
| `V
]

The type for specifiy the layout direction.

type align = [
| `Start
| `End
| `Center
| `Justify
| `Distribute
| `Stretch
]

The type for specifying alignements. `Stretch is dodgy.

type 'a t

The type for groups which summarize actions of type 'a.

val v : ?⁠class':Jstr.t -> ?⁠enabled:bool Note.signal -> ?⁠action:'a Note.event -> ?⁠xdir_align:align -> ?⁠dir_align:align -> dir:dir -> Brr.El.t list Note.signal -> 'a t

v ~class' ~enabled ~action ~dir_align ~xdir_align ~dir cs layouts elements cs in a container. Arguments are as follows:

  • dir is the layout direction for elements
  • dir_align is the alignment between elements in the layout direction. Defaults to `Start.
  • xdir_align is the alignement between elements in the direction perpendicular to the layout direction. Defaults to `Start.
  • action can be used by the client to summarize the user interaction performed by the underlying elements. Defaults to E.enver
  • enabled visually indicates if the group can be interacted with. Defaults to S.Bool.true'
  • class' is added to the underlying element's classes.
val dir : 'a t -> dir

dir g is g's children layout direction.

val dir_align : 'a t -> align

dir_align g is g's children alignement along the layout direction.

val xdir_align : 'a t -> align

xdir_align g is g's children alignement in the parti the direction.

val action : 'a t -> 'a Note.event

action g occurs whenever an action occurs in the group (see v).

val enabled : 'a t -> bool Note.signal

enabled g is true iff g is enabled.

val el : 'a t -> Brr.El.t

el b is b's DOM element.

Transforming UI elements

val with_action : 'b Note.event -> 'a t -> 'b t

with_action action g uses g for g's action.

val hide_action : 'b t -> 'a t

hide_action g is with_action E.never g.

Styling

The element returned by el makes use of the following CSS classes:

  • ui-group always.
  • ui-dir-{h,v} according to dir.
  • ui-dir-align-{start,end,center,justify,distribute,stretch} according to dir_align
  • ui-xdir-align-{start,end,center,justify,distribute,stretch} according to xdir_align
  • ui-disabled whenever enabled is false.