mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
use svg icon in introduce
This commit is contained in:
parent
1b93d795e0
commit
96b38dd3ec
@ -1,10 +1,6 @@
|
||||
@import "../../style/mixins/index";
|
||||
|
||||
@tree-prefix-cls: ~"@{ant-prefix}-tree";
|
||||
@tree-default-open-icon: "\e606";
|
||||
@tree-showline-open-icon: "\e621";
|
||||
@tree-showline-close-icon: "\e645";
|
||||
@tree-doc-icon: "\e664";
|
||||
|
||||
.antTreeSwitcherIcon(@type: "tree-default-open-icon") {
|
||||
.@{tree-prefix-cls}-switcher-icon {
|
||||
|
@ -26,13 +26,54 @@ We supply a series of design principles, practical patterns and high quality des
|
||||
|
||||
[React](http://facebook.github.io/react/) is used to encapsulate a library of components which embody our design language. We welcome the community to implement [our design system](https://ant.design/docs/spec/introduce) in other front-end frameworks of their choice.
|
||||
|
||||
- [Ant Design of React](/docs/react/introduce) (official implementation)
|
||||
- <div class="outside-link"><a href="http://ng.ant.design" target="_blank">NG-ZORRO - Ant Design of Angular</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank">vue-beauty (vue)</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/priornix/antizer" target="_blank">antizer (ClojureScript)</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/idcos/antd-ember" target="_blank">antd-ember</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/zzuu666/antue" target="_blank">antue (vue)</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/vueComponent/ant-design" target="_blank">vue-antd-ui - Ant Design of Vue.js 2.5.0+</a></div>
|
||||
```__react
|
||||
import { Icon } from 'antd';
|
||||
|
||||
const LinkIcon = () => (
|
||||
<Icon type="export" className="outside-link-icon" />
|
||||
);
|
||||
|
||||
const LinksList = () => (
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/react/introduce" target="_blank">Ant Design of React</a>
|
||||
(official implementation)
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://ng.ant.design" target="_blank">
|
||||
NG-ZORRO - Ant Design of Angular<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
|
||||
vue-beauty (vue)<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/priornix/antizer" target="_blank">
|
||||
antizer (ClojureScript)<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/idcos/antd-ember" target="_blank">
|
||||
antd-ember<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/zzuu666/antue" target="_blank">
|
||||
antue (vue)<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/vueComponent/ant-design" target="_blank">
|
||||
vue-antd-ui - Ant Design of Vue.js 2.5.0+<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
ReactDOM.render(<LinksList />, mountNode);
|
||||
```
|
||||
|
||||
## Who's using Ant Design
|
||||
|
||||
|
@ -28,13 +28,54 @@ title: 介绍
|
||||
|
||||
我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库,也欢迎社区其他框架的实现版本。
|
||||
|
||||
- [Ant Design of React](/docs/react/introduce)(官方实现)
|
||||
- <div class="outside-link"><a href="http://ng.ant.design" target="_blank">NG-ZORRO - Ant Design of Angular</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank">vue-beauty (vue)</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/priornix/antizer" target="_blank">antizer (ClojureScript)</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/idcos/antd-ember" target="_blank">antd-ember</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/zzuu666/antue" target="_blank">antue (vue)</a></div>
|
||||
- <div class="outside-link"><a href="https://github.com/vueComponent/ant-design" target="_blank">vue-antd-ui - Ant Design of Vue.js 2.5.0+</a></div>
|
||||
```__react
|
||||
import { Icon } from 'antd';
|
||||
|
||||
const LinkIcon = () => (
|
||||
<Icon type="export" className="outside-link-icon" />
|
||||
);
|
||||
|
||||
const LinksList = () => (
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/react/introduce" target="_blank">Ant Design of React</a>
|
||||
(官方实现)
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://ng.ant.design" target="_blank">
|
||||
NG-ZORRO - Ant Design of Angular<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
|
||||
vue-beauty (vue)<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/priornix/antizer" target="_blank">
|
||||
antizer (ClojureScript)<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/idcos/antd-ember" target="_blank">
|
||||
antd-ember<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/zzuu666/antue" target="_blank">
|
||||
antue (vue)<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/vueComponent/ant-design" target="_blank">
|
||||
vue-antd-ui - Ant Design of Vue.js 2.5.0+<LinkIcon />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
ReactDOM.render(<LinksList />, mountNode);
|
||||
```
|
||||
|
||||
## 谁在使用
|
||||
|
||||
|
@ -90,9 +90,7 @@ a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.outside-link:after {
|
||||
content: '\e691';
|
||||
font-family: 'anticon';
|
||||
.outside-link-icon {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
|
Loading…
Reference in New Issue
Block a user