Usage | Components | Theme | Browser support
A Material inspired collection of HTML elements (Custom Elements) implemented in ClojureScript.
WORK IN PROGRESS
Picada components are native HTML elements that can be manipulated like any HTML element (e.g. <div/>).
(ns my-app
(:require [picada.bootstrap :as boot]
[picada.component.button :as but]
[picada.component.icon :as ico]
[lucuma.core :as luc]))
; register all elements at once
(boot/register-all)
; or individually
(luc/register [but/pica-fab ico/pica-icon])
; then use them
(.appendChild (.-body js/document) "pica-fab")Any webpage using Picada components must import associated JS and CSS assets.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="picada.css">
<script src="picada.js"></script>
</head>
<body>
<pica-fab icon="reply" mini></pica-fab>
</body>
</html>Some components are intended to be used programmatically:
(ns my-app
(:require [picada.component.snackar :as sna]))
(defn show-snackbar []
(sna/show "Some text" {:name "An action" :fn #(.log js/console "Action clicked")}))Also as some component properties are not exposed as attributes (e.g. complex values such as maps) they must be manipulated programmatically.
<pica-fab id="fab-with-action" icon="reply"></pica-fab>
<script>
var el = document.getElementById("fab-with-action");
el.action = {name: "My Action", fn: function() {alert("You clicked the button!")}};
</script>Components using icon rely on Material Icons. Any icon in this catalog can be specified using its id in the form :category/id (e.g. :action/reply).
<pica-fab icon="content/reply" mini></pica-fab>
<!-- http://www.google.com/design/icons/#ic_reply is part of content category -->on github.
(picada.component.icon/set-url-sprite-format! "resources/svg-sprite-%s-symbol.svg#ic_%s_24px")As this is used to derive the value of use:xlink:href this has to point to a relative URL. use does not offer cross domain facilities yet.
Picada depends on lucuma for the Custom Elements creation, hipo to facilitate eventual DOM reconciliations and garden to define elements styles as CSS.
(ns my-ns
(:require [lucuma.core :as l]
[picada.component :refer-macros [defcomponent]]))
(defcomponent my-component
:document
(fn [el {:keys [action title]}]
[:host {:role "dialog" :title (str "::" title)}
[:h2 "My component"]
[:div (if action (:name action))]])
:style
[:host
{:color "red"}]
:properties {:action nil :title ""})Each component embed its own styles as CSS. Those are parameterized using CSS variables.
Picada relies on modern technology (SVG spritemaps, CSS Animations, CSS4 and DOM4) that might not be available in your target browsers.
A combination of polyfills and transpiling will help with older browsers:
- SVG for Everybody to add external SVG spritemaps support
- web-animation-js to polyfill CSS Animations
- dom4 (available as CLJSJS package) to polyfill DOM4 methods
- document-register-element to polyfill Custom Elements (see more details here)
- cssnext to transpile CSS4
Copyright (C) 2015 Julien Eluard
Distributed under the Eclipse Public License, the same as Clojure.