re-com
Introduction
Buttons
Basic Button
Row Button
Circle Icon Button
Icon Button
Info Button
Hyperlink
Hyperlink (href)
Basics
Checkbox
Radio Button
Input Text
Slider
Progress Bar
Throbber
Date Picker
Date Range Picker
Input Time
Selection
Dropdown
Selection List
Multi-select List
Tag Dropdown
Tree-select
Tabs
Typeahead
Generic Dropdown
Tables
Simple V-table
V-table
Nested Grid
Nested V-grid
Layers
Modal Panel
Popover
Popover Reference
Tour
Typography
Label
Paragraph (p)
Title
Alert Box
Alert List
Layout
H-box
V-box
Box
Gap
Line
Scroller
Border
Splits
Debugging
Config
2.24.1-8-2ac45d5-SNAPSHOT

Only Tested On Chrome

re-com should work on all modern browsers, but there might be dragons!
Introduction
source:
component
|
page
Re-com is a library of ClojureScript UI components, built on top of
Reagent
.
It provides layout and widget components for building desktop-class apps. The set of widgets is incomplete but growing.

The github repo
is here
.
This demo app is an SPA (single page application), built using re-com. It serves as:
  • a visual showcase of the components
  • documentation for the components (parameters etc.)
  • shows, via its own code, how to use the components
  • something of a test harness



To help with your exploration, look up at the page title "Introduction", and just to the right of it, notice the two hyperlinks which link to the source code (Github) associated with this page and the component being presented. This feature exists on all pages.
Uses Named Parameters
Generally, when you use a Reagent component it looks like this:
[component-name style-map param1 param2  param3]
The name of a component is optionally followed by a style map, and then some number of positional parameters.
Re-com uses a different approach. All re-com components take named parameters.For example, using re-com's button component, looks like:
[button
  :label     "Click me!"
  :on-click  #(swap! click-count inc)
  :style     {:background-color "blue"}]
Each parameter involves a leading keyword name, followed by a value. Always pairs.
We use named parameters because:
  1. the code seems more easily read and understood (although longer)
  2. optionality - not all parameters need be supplied and defaults can be introduced
  3. API flexibility - easy to add new parameters
Read further analysis
here
.
Layouts
Re-com has layout components which are not themselves visible - they just arrange other components.
The key components are h-box and v-box which arange their children horizontally and vertically respectively. Because they are mutually nestable, you can combine them to create arbitrarily complex layouts.This very page involves a v-box arranging other components:
[v-box
   :children [[title "Introduction"]
              [gap :size "15px"]
              [this-app]
              [gap :size "30px"]
              [line]
              [named-params]
              ... etc
              ]]
The underlying technology is
flexbox
And this example code, showing an h-box as a child of a v-box ...
[v-box
  :children [[box :child "Header"]
             [h-box
              :height "100px"
              :children [[box :size "70px" :child "Nav"]
                         [box :size "1" :child "Content"]]]
             [box :child "Footer"]]]
... results in this kind of structure:
Header
Nav
Content
Footer