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

• Reagent Demo

• Rum Demo

• Antizer Documentation

• API Documentation

• Ant Design Component Documentation

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

• Gooreplacer
• History Master

Usage

To use Antizer, add the following to your project.clj:

[antizer "0.3.1"]

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:

1. 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.

2. 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.css
• cljsjs/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.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).