spade.core
defattrsclj/smacro
(defattrs class-name params & style)Declare a CSS module function. The usage is identical to defclass, but
instead of returning the class name directly, functions declared using
defattrs will return an attribute map, eg:
{:class "the-class-name"}
A defattrs function can then be used simply in a reagent component as:
(defn ship [wing-color]
[:div (ship-attrs wing-color)
[:div.wing]])
Declare a CSS module function. The usage is identical to [[defclass]], but
instead of returning the class name directly, functions declared using
defattrs will return an attribute map, eg:
{:class "the-class-name"}
A `defattrs` function can then be used simply in a reagent component as:
(defn ship [wing-color]
[:div (ship-attrs wing-color)
[:div.wing]])defclassclj/smacro
(defclass class-name params & style)Define a CSS module function named class-name and accepting a vector
of parameters, params. For example:
(defclass ship-style [wing-color]
{:background "#999"}
[:.wing {:color wing-color}])
Notice how we can return multiple statements from defclass. The first map
applies to whatever element gets the class, and the rest are used for its
descendents. The above translates directly to garden syntax as:
[:.ship-style {:background "#999"}
[:.wing {:background wing-color}]]
Calling the ship-style function declared here returns a string containing
the CSS class name that refers to the style created. In reagent, you might
use it like this:
(defn ship [wing-color]
[:div {:class (ship-style wing-color)}
[:div.wing]])
Define a CSS module function named `class-name` and accepting a vector
of parameters, `params`. For example:
(defclass ship-style [wing-color]
{:background "#999"}
[:.wing {:color wing-color}])
Notice how we can return multiple statements from `defclass`. The first map
applies to whatever element gets the class, and the rest are used for its
descendents. The above translates directly to garden syntax as:
[:.ship-style {:background "#999"}
[:.wing {:background wing-color}]]
Calling the `ship-style` function declared here returns a string containing
the CSS class name that refers to the style created. In reagent, you might
use it like this:
(defn ship [wing-color]
[:div {:class (ship-style wing-color)}
[:div.wing]])defglobalclj/smacro
(defglobal group-name & style)Declare a global style with the name group-name. The style declaration is
similar to that of defattrs or defclass in that you can declare
multiple styles at once, but since these styles apply globally, and can go
on elements like <body>, the style is injected when evaluated, and so
cannot accept parameters.
Declare a global style with the name `group-name`. The style declaration is similar to that of [[defattrs]] or [[defclass]] in that you can declare multiple styles at once, but since these styles apply globally, and can go on elements like `<body>`, the style is injected when evaluated, and so cannot accept parameters.
defkeyframesclj/smacro
(defkeyframes keyframes-name params & style)Declare an @keyframes CSS module function. Like defclass, you can
accept parameters here to be able to dynamically generate keyframes. The
return value of the declared function is the animation identifier, and can
be used like:
(defkeyframes anim-frames []
["0%" {:opacity 0}]
["100%" {:opacity 1}])
(defclass serenity []
{:animation [[(anim-frames) "560ms" 'ease-in-out]]})
Declare an `@keyframes` CSS module function. Like [[defclass]], you can
accept parameters here to be able to dynamically generate keyframes. The
return value of the declared function is the animation identifier, and can
be used like:
(defkeyframes anim-frames []
["0%" {:opacity 0}]
["100%" {:opacity 1}])
(defclass serenity []
{:animation [[(anim-frames) "560ms" 'ease-in-out]]})cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close