ClojureScript | Cookbook

Inhaltsverzeichnis

UI: Common tasks

Loading spinner

<head> .... <link href="lib/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="lib/css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="app"> <div class="d-flex justify-content-center"> <div class="loader"></div> </div> </div> <script src="lib/jquery/3.4.1/jquery.min.js" type="text/javascript"></script> <script src="lib/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script> ....

lib/css/style.css

.loader {
	position: fixed;
	z-index: 999;
	overflow: visible;
	margin: auto;

	border: 16px solid #f3f3f3;
	border-radius: 5
	border-top: 16px solid blue;

	width: 120px; height: 120px;
	top: 0; left: 0; bottom: 0; right: 0;

	-webkit-animation: spin 2s linear infinite;
	/* Safari */
	animation: spin 2s linear infinite;
}

/* Transparent Overlay */
.loader:before {
	content: '';
	display: block;
	position: fixed;
	top: 0; left: 0;
	width: 10
	height: 10
}

/* Safari */
@-webkit-keyframes spin {
	
	10
}

@keyframes spin {
	
	10
}

Rendering

How to render content

(r/render-component [content]
  (.querySelector js/document "#app"))
(r/render-component [content])
  (.-body js/document)
(defn ^:export run []
  (r/render [simple-example]
  (js/document.getElementById "app"))
(defn home-page []
  [:div
    [:h2 "Homepage!"]])

;; -------------------------
;; Initialize app

(defn mount-root []
  (reagent/render [home-page] (.getElementById js/document "app")))

(defn init! []
  (mount-root))

Render several html tags as one

(defn content-row
    ""
    [col1 col2 col3]
    [:<>
        [:div.grid-item col1]
        [:div.grid-item col2]
        [:div.grid-item col3]])