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))))
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.