ClojureScript | Cookbook

by Ralph ClojureScript, Cookbook

Inhaltsverzeichnis [Anzeigen]

UI: Common tasks

Loading spinner

index.html

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
....
<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> ....
<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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.loader {
position: fixed;
z-index: 999;
overflow: visible;
margin: auto;
border: 16px solid #f3f3f3;
border-radius: 50
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: 100
height: 100
}
/* Safari */
@-webkit-keyframes spin {
0
100
}
@keyframes spin {
0
100
}
.loader { position: fixed; z-index: 999; overflow: visible; margin: auto; border: 16px solid #f3f3f3; border-radius: 50 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: 100 height: 100 } /* Safari */ @-webkit-keyframes spin { 0 100 } @keyframes spin { 0 100 }
.loader {
	position: fixed;
	z-index: 999;
	overflow: visible;
	margin: auto;

	border: 16px solid #f3f3f3;
	border-radius: 50
	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: 100
	height: 100
}

/* Safari */
@-webkit-keyframes spin {
	0
	100
}

@keyframes spin {
	0
	100
}

Rendering

How to render content

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
(r/render-component [content]
(.querySelector js/document "#app"))
(r/render-component [content] (.querySelector js/document "#app"))
(r/render-component [content]
  (.querySelector js/document "#app"))
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
(r/render-component [content])
(.-body js/document)
(r/render-component [content]) (.-body js/document)
(r/render-component [content])
  (.-body js/document)
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
(defn ^:export run []
(r/render [simple-example]
(js/document.getElementById "app"))
(defn ^:export run [] (r/render [simple-example] (js/document.getElementById "app"))
(defn ^:export run []
  (r/render [simple-example]
  (js/document.getElementById "app"))
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
(defn home-page []
[:div
[:h2 "Homepage!"]])
;; -------------------------
;; Initialize app
(defn mount-root []
(reagent/render [home-page] (.getElementById js/document "app")))
(defn init! []
(mount-root))
(defn home-page [] [:div [:h2 "Homepage!"]]) ;; ------------------------- ;; Initialize app (defn mount-root [] (reagent/render [home-page] (.getElementById js/document "app"))) (defn init! [] (mount-root))
(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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
(defn content-row
""
[col1 col2 col3]
[:<>
[:div.grid-item col1]
[:div.grid-item col2]
[:div.grid-item col3]])
(defn content-row "" [col1 col2 col3] [:<> [:div.grid-item col1] [:div.grid-item col2] [:div.grid-item col3]])
(defn content-row
    ""
    [col1 col2 col3]
    [:<>
        [:div.grid-item col1]
        [:div.grid-item col2]
        [:div.grid-item col3]])