simpleui tutorial examples docs source

Tabs (Using HATEOAS)

This example shows how easy it is to implement tabs using SimpleUI. Following the principle of Hypertext As The Engine Of Application State, the selected tab is a part of the application state. Therefore, to display and select tabs in your application, simply include the tab markup in the returned HTML.

(defn- tab [i val]
  [:a {:hx-get "content"
       :hx-vals {:tab-index i}
       :class (when (= i val) "selected")}
    "Tab " i])

(defcomponent ^:endpoint content [req ^:long tab-index]
  [:div {:hx-target "this"}
    [:div.tab-list
      (map #(tab % tab-index) (range 1 4))]
    [:div.tab-content
      "This is the content for tab " tab-index]])

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      (content req 1))))
This is the content for tab 1

Tabs (Using Hyperscript)

Tabs are a good example of a static component.
We can use hyperscript instead of server requests for increased performance.

(defn- static-tab [i]
  [:a {:class (if (= 1 i) "tab selected" "tab")
       :_ (str "on click take .selected from .tab then add .d-none to .tab-content then remove .d-none from #content" i)}
   "Tab " i])

(defn- static-content [i]
  [:div {:class (if (= 1 i) "tab-content" "tab-content d-none")
         :id (str "content" i)}
   "This is the content for tab " i])

(def ring-handler
  (fn [req]
    ;; page renders initial html
    (page
      [:div
       [:div.tab-list
        (map static-tab (range 1 4))]
       (map static-content (range 1 4))])))

Try clicking the second set of tabs and notice the performance difference.

This is the content for tab 1
This is the content for tab 2
This is the content for tab 3