mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-11 10:05:07 +08:00
7a33a66f50
As mentioned in antd FAQ https://github.com/ant-design/ant-design/wiki/FAQ#i-just-want-to-use-menubuttonetc-but-it-seems-that-i-have-to-import-the-whole-antd-and-its-style
106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
<p align="center">
|
|
<a href="http://ant.design">
|
|
<img width="320" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
|
</a>
|
|
</p>
|
|
|
|
# Ant Design [](https://travis-ci.org/ant-design/ant-design) [](https://www.npmjs.org/package/antd) [](https://npmjs.org/package/antd) [](https://david-dm.org/ant-design/ant-design) [](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
|
|
|
|
An enterprise-class UI design language and React-based implementation.
|
|
|
|
## Features
|
|
|
|
- An enterprise-class design language and high quality UI.
|
|
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
|
|
- Writen in TypeScript with complete define types.
|
|
- A npm + webpack + babel + dora + [dva](https://github.com/dvajs/dva) development framework.
|
|
|
|
## Install
|
|
|
|
```bash
|
|
npm install antd
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Use prebuilt bundle
|
|
|
|
```jsx
|
|
import { DatePicker } from 'antd';
|
|
ReactDOM.render(<DatePicker />, mountNode);
|
|
```
|
|
|
|
And import style manually:
|
|
|
|
```jsx
|
|
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
|
```
|
|
|
|
### Use modularized antd
|
|
|
|
- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
|
|
|
```js
|
|
// .babelrc
|
|
{
|
|
"plugins": [["import", { libraryName: "antd", style: "css" }]]
|
|
}
|
|
```
|
|
|
|
Then you can import components from antd directly.
|
|
|
|
```jsx
|
|
// import js and css modularly, parsed by babel-plugin-import
|
|
import { DatePicker } from 'antd';
|
|
```
|
|
|
|
- Manually import
|
|
|
|
```jsx
|
|
import DatePicker from 'antd/lib/date-picker'; // just for js
|
|
import 'antd/lib/date-picker/style/css'; // with style
|
|
```
|
|
|
|
|
|
## Browser Support
|
|
|
|
Normal browsers and Internet Explorer 9+.
|
|
|
|
> [IE8 issues](https://github.com/xcatliu/react-ie8)
|
|
|
|
## TypeScript
|
|
|
|
tsconfig.json
|
|
|
|
```
|
|
{
|
|
"compilerOptions": {
|
|
"moduleResolution": "node",
|
|
"jsx": "preserve",
|
|
"allowSyntheticDefaultImports": true
|
|
}
|
|
}
|
|
```
|
|
|
|
## Links
|
|
|
|
- [Home page](http://ant.design/)
|
|
- [UI library](http://ant.design/docs/react/introduce)
|
|
- [ChangeLog](CHANGELOG.en-US.md)
|
|
- [Scaffold tool](https://github.com/ant-design/antd-init/)
|
|
- [Development tool](http://ant-tool.github.io/)
|
|
- [React components](http://react-component.github.io/)
|
|
- [Mobile UI](http://mobile.ant.design)
|
|
- [React style guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
|
|
- [React component design guide](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
|
|
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
|
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
|
- [Boilerplates](https://github.com/ant-design/ant-design/issues/129)
|
|
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
|
|
- [CodePen boilerplate](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
|
|
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
|
|
|
## Contributing
|
|
|
|
We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
|