rum + material-ui

core.cljs

(ns speakup.core
  (:require [rum.core :as rum]
            [cljs-react-material-ui.core :refer [get-mui-theme color]]
            [cljs-react-material-ui.icons :as ic]
            [cljs-react-material-ui.rum :as ui]
            [cljs-react-material-ui.chip-input.rum :refer [chip-input]]))

(enable-console-print!)

;; (println "This text is printed from src/speakup/core.cljs. Go ahead and edit it and see reloading in action.")

;; define your app data so that it doesn't get over-written on reload

(defonce app-state (atom {:text "Hello world!"}))


(rum/defc my-table
  []
  (ui/table { :show-checkboxes false }
            (ui/table-body
             (ui/table-row
              (ui/table-row-column "Nexus")))))

(rum/defc TimePicker []
  [:div
   (ui/time-picker {:format "24hr" :auto-ok true :hint-text "hint"})
   (ui/date-picker)])

(rum/defc thing1
  []
  [:div "content1"
   (chip-input {:data-source ["Nexus" "Max" "Prokopov"] :open-on-focus true :default-value ["A" "B"]})
   (TimePicker)])

(rum/defc App []
  (ui/mui-theme-provider {:mui-theme (get-mui-theme)}
                         [:div
                          (ui/app-bar {:icon-element-right (ui/icon-button (ic/action-accessibility))})
                          (ui/tabs
                           (ui/tab {:label "one"}
                                   [:div ["hey"
                                          (ui/paper "yes"
                                                    (my-table))]])
                           (ui/tab {:label "two"} (thing1))
                           (ui/tab {:label "drei"}
                                   [:div
                                    (ui/paper {} "Ima paper")]))]))

(rum/mount (App) (js/document.getElementById "app"))

(defn on-js-reload []
  ;; optionally touch your app-state to force rerendering depending on
  ;; your application
  ;; (swap! app-state update-in [:__figwheel_counter] inc)
  )