6.1 KiB
order | title |
---|---|
0 | Ant Design of React |
Following Ant Design specification, We develop a React UI library antd
that contains a set of high quality components and demos for building rich interactive desktop applications.
Features
- An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with complete define types.
- A npm + webpack + dva front-end development workflow.
Compatibility
Modern browsers and IE9+.
Version
You can subscribe to this feed for new version notification: https://github.com/ant-design/ant-design/releases.atom
Installation
Using npm to install
We recommend using npm to install,it not only makes development easier,but you can also take advantage of the whole ecosystem.
If using npm to install, you could use import
or require
.
Stable version:
$ npm install antd --save
Beta version:
$ npm install antd@beta --save
Import in Browser
We provide antd.js
antd.css
and antd.min.js
antd.min.css
under antd/dist
in antd's npm package, in order to import all the components of antd directly. Also, you can use unpkg.
It's not recommended to use the already built files, as you cannot get bugfixes from the dependencies of antd.
stable
- https://unpkg.com/antd/dist/antd.js
- https://unpkg.com/antd/dist/antd.css
- https://unpkg.com/antd/dist/antd.min.js
- https://unpkg.com/antd/dist/antd.min.css
beta
- https://unpkg.com/antd@beta/dist/antd.js
- https://unpkg.com/antd@beta/dist/antd.css
- https://unpkg.com/antd@beta/dist/antd.min.js
- https://unpkg.com/antd@beta/dist/antd.min.css
Here is an example of how to build your own antd.js if you are using antd@<1.0.0.
Usage
Use prebuilt bundle
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
And import style manually:
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
Use modularized antd
-
Use babel-plugin-import (Recommended)
// .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd", style: "css" }] // `style: true` for less ] }
Then you can import components from antd, equivalent to import manually below.
// import js and css modularly, parsed by babel-plugin-import import { DatePicker } from 'antd';
-
Manually import
import DatePicker from 'antd/lib/date-picker'; // for js import 'antd/lib/date-picker/style/css'; // for css // import 'antd/lib/date-picker/style'; // that will import less
Useful Links
- Home page
- UI library
- Change Log
- Scaffold tool
- React components
- Mobile UI
- Motion
- Developer Instruction
- Versioning Release Note
- Boilerplates
- FAQ
- CodePen boilerplate for bug reports
- Awesome Ant Design
- Customize Theme
Who are using antd
If your company or product uses Ant Design, you are welcome to comment in this issue. Thank you!
Contributing
Please read our CONTRIBUTING.md first.
If you have any idea to improve antd, just create a Pull Request. Also, you can also issue bugs.
Recommend to read How To Ask Questions The Smart Way and How to Ask a Question in Open Source Community and How to Report Bugs Effectively, a smart question will get right answer quickly.
Need Help?
You can ask questions while you meet problem through the following ways.
And we encourage experienced users to help those who are not familiar with antd
.
We recommend to tag your questions with antd
on Stack Overflow.
- Stack Overflow(Recommended)