priornix / Antizer
Programming Languages
Projects that are alternatives of or similar to Antizer
antizer
Antizer is a ClojureScript library implementing Ant Design React components for Reagent and Rum.
Ant Design is an enterprise-class UI design language and React-based implementation with the following features:
- An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box.
- Extensive API documentation and examples.
Resources
Status
All the Ant Design components should be fully functional and production-ready. If you discover any missing or invalid components, please file a ticket.
Who's Using Antizer
Usage
To use Antizer, add the following to your project.clj:
[antizer "0.3.3"]
You would also need to add the ClojureScript React library that you will be using.
For Reagent:
[reagent "X.Y.Z"]
For Rum:
[rum "X.Y.Z"]
It is also necessary to include the relevant Ant Design CSS stylesheet in your HTML page. There are two ways that the CSS files can be included:
- Loading the CSS stylesheet from an external CDN:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/${antd_version}/antd.min.css">
where ${antd_version} must be the same antd library version as the one that Antizer is being linked to.
- Alternatively, the CSS sheetsheet can be loaded from either of the following classpaths. This can be done via Ring library's wrap-resource function:
cljsjs/antd/development/antd.inc.csscljsjs/antd/production/antd.min.inc.css
An example of how this can be done is provided by https://github.com/dfuenzalida/antizer-demo.
You can also follow the instructions for customization with LESS here.
Quick Example
For Reagent:
(require '[antizer.reagent :as ant])
(require '[reagent.core :as r])
(defn click-me []
[ant/button {:on-click #(ant/message-info "Hello Reagent!")} "Click me"])
(defn init! []
(r/render [click-me] (.-body js/document)))
For Rum:
(require '[antizer.rum :as ant])
(require '[rum.core :as rum])
(defn click-me []
(ant/button {:on-click #(ant/message-info "Hello Rum!")} "Click me"))
(defn init! []
(rum/mount (click-me) (.-body js/document)))
Examples
To compile the examples:
lein with-profile +examples cljsbuild once
To compile the examples and enable hot reloading with figwheel:
lein with-profile +examples-dev figwheel
After compilation, open up the respective HTML page in the examples/resources folder in your browser.
Changes
0.3.3
- Updated antd library to 3.26.17
0.3.2
- Updated antd library to 3.20.6. thx Christoph Frick, Kelvin Jiang
0.3.1
- Updated antd library to 3.8.0.
- Added documentation on loading CSS files. #11
- Added Card.Meta example.
- Fixed Form example.
- Minor fomatting changes to docstring.
0.3.0
- Updated antd library to 3.7.1. #16 thx @sctianwei, @piotr-yuxuan
- Fixed autocomplete example for empty string.
- Fixed layout issue in examples.
- Removed known issue for DatePicker and Calendar components.
- Added props argument to reagent.create-form. #12 thx @AndreasKlein
0.2.2
- Updated antd library to 2.12.3.
- Fixed resource typo in README.md and documentation. #1 thx @weavejester
- Added missing component: Breadcrumb.Item. #2 thx @weavejester
- Added new component: Input.TextArea. #3 thx @mbuczko
- Fixed layout issue in examples.
- Added note on DatePicker and Calendar known issues.
0.2.1
- Updated antd library to 2.11.2.
- Updated instructions for CSS file inclusion.
- Added Avatar component and example.
- Fixed layout and CSS styles for examples.
- Fixed cljsbuild settings for examples.
Known Issues
None
Acknowledgement
Thanks to Ant Design, cljsjs/antd, Reagent, Rum and of course ClojureScript, without which this project would not be possible.
License
Copyright © 2017 Michael Lim
Licensed under Eclipse Public License (see LICENSE).