|
|
|
|
---
|
|
|
|
|
order: 7
|
|
|
|
|
title: 社区精选组件
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
`antd` 是 Ant Design 设计规范的 React 实现，所以我们倾向于只提供符合该规范、且带有视觉展现的 UI 组件，也尽量不重复造轮子。我们推荐使用以下社区已有的优秀实现，与 antd 形成互补：
|
|
|
|
|
|
|
|
|
|
类型 | 推荐组件
|
|
|
|
|
----|--------
|
|
|
|
|
路由 | [react-router](https://github.com/ReactTraining/react-router)
|
|
|
|
|
布局 | [react-blocks](http://whoisandie.github.io/react-blocks/)
|
|
|
|
|
拖拽 | [react-dnd](https://github.com/gaearon/react-dnd) [react-draggable](https://github.com/mzabriskie/react-draggable)
|
|
|
|
|
代码编辑器 | [react-codemirror](https://github.com/JedWatson/react-codemirror)
|
|
|
|
|
富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) [react-lz-editor](https://github.com/leejaen/react-lz-editor)（Ant Design 风格）
|
|
|
|
|
拾色器 | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
|
|
|
|
|
响应式 | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media)
|
|
|
|
|
复制到剪贴板 | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)
|
|
|
|
|
页面 meta 属性 | [react-helmet](https://github.com/nfl/react-helmet) [react-document-title](https://github.com/gaearon/react-document-title)
|
|
|
|
|
图标 | [react-fa](https://github.com/andreypopp/react-fa) [react-icons](https://github.com/gorangajic/react-icons)
|
|
|
|
|
二维码 | [qrcode.react](https://github.com/zpao/qrcode.react)
|
|
|
|
|
可视化图表 | [g2-react](https://github.com/antvis/g2-react) [recharts](https://github.com/recharts/recharts/) [victory](https://github.com/FormidableLabs/victory)
|
|
|
|
|
顶部进度条 | [nprogress](https://github.com/rstacruz/nprogress)
|
|
|
|
|
应用国际化 | [react-intl](https://github.com/yahoo/react-intl)
|
|
|
|
|
代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.markdown table td:first-child {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
width: 20%;
|
|
|
|
|
background: #fcfcfc;
|
|
|
|
|
}
|
|
|
|
|
.markdown table td > a:not(:last-child) {
|
|
|
|
|
margin-right: 18px;
|
|
|
|
|
}
|
|
|
|
|
.markdown table td > a:not(:last-child):after {
|
|
|
|
|
content: '|';
|
|
|
|
|
color: #bbb;
|
|
|
|
|
margin: 0 6px 0 8px;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
