mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 11:10:01 +08:00
site: improve recommendation page style
This commit is contained in:
afc163
parent
557f40aec4
commit
a5ce520cc4
@ -5,16 +5,36 @@ title: Third-Party Libraries
|
||||
|
||||
`antd` is designed to provide high-quality React UI components which following Ant Design Specification. So, we are not going to implement other functions which are not relative to `antd`'s target, and recommend to use excellent third-party library which came from React community:
|
||||
|
||||
* **Router: ** [react-router](https://github.com/ReactTraining/react-router)
|
||||
* **Layout: ** [react-blocks](http://whoisandie.github.io/react-blocks/)
|
||||
* **Drag and drop: ** [react-dnd](https://github.com/gaearon/react-dnd)
|
||||
* **Code Editor: ** [react-codemirror](https://github.com/JedWatson/react-codemirror)
|
||||
* **Rich Text Editor: ** [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)
|
||||
* **Color Picker: ** [rc-color-picker](https://github.com/react-component/color-picker), [react-color](http://casesandberg.github.io/react-color/)
|
||||
* **Media Query: ** [react-responsive](https://github.com/contra/react-responsive), [react-media](https://github.com/ReactTraining/react-media)
|
||||
* **Copy to clipboard: ** [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)
|
||||
* **Document head manager: ** [react-helmet](https://github.com/nfl/react-helmet)
|
||||
* **Font Awesome Icons: ** [react-fa](https://github.com/andreypopp/react-fa)
|
||||
* **QR Code: **: [qrcode.react](https://github.com/zpao/qrcode.react)
|
||||
* **Charts**: [g2-react](https://github.com/antvis/g2-react) [recharts](https://github.com/recharts/recharts/) [victory](https://github.com/FormidableLabs/victory)
|
||||
* **Top Progress Bar**: [nprogress](https://github.com/rstacruz/nprogress)
|
||||
Category | Recommanded Components
|
||||
---------|-----------------------
|
||||
Router | [react-router](https://github.com/ReactTraining/react-router)
|
||||
Layout | [react-blocks](http://whoisandie.github.io/react-blocks/)
|
||||
Drag and drop | [react-dnd](https://github.com/gaearon/react-dnd)
|
||||
Code Editor | [react-codemirror](https://github.com/JedWatson/react-codemirror)
|
||||
Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)
|
||||
Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/)
|
||||
Media Query | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media)
|
||||
Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard)
|
||||
Document head manager | [react-helmet](https://github.com/nfl/react-helmet)
|
||||
Icons | [react-fa](https://github.com/andreypopp/react-fa) [react-icons](https://github.com/gorangajic/react-icons)
|
||||
QR Code | [qrcode.react](https://github.com/zpao/qrcode.react)
|
||||
Charts | [g2-react](https://github.com/antvis/g2-react) [recharts](https://github.com/recharts/recharts/) [victory](https://github.com/FormidableLabs/victory)
|
||||
Top Progress Bar | [nprogress](https://github.com/rstacruz/nprogress)
|
||||
|
||||
<style>
|
||||
.markdown table td:first-child {
|
||||
font-weight: 500;
|
||||
width: 25%;
|
||||
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>
|
||||
|
||||
@ -5,16 +5,36 @@ 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-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)
|
||||
* **拾色器：** [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)
|
||||
* **管理 document head：** [react-helmet](https://github.com/nfl/react-helmet)
|
||||
* **Font Awesome 图标**: [react-fa](https://github.com/andreypopp/react-fa)
|
||||
* **二维码：**: [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-router](https://github.com/ReactTraining/react-router)
|
||||
布局 | [react-blocks](http://whoisandie.github.io/react-blocks/)
|
||||
拖拽 | [react-dnd](https://github.com/gaearon/react-dnd)
|
||||
代码编辑器 | [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)
|
||||
拾色器 | [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-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)
|
||||
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user